Diferencia entre revisiones de «PHP Promise e Fetch»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
Línea 772: Línea 772:
 
* '''IMPORTANTE:''' Cando amosedes imaxes dunha api, tedes que ir á documentación do servizo e ver como 'construír' a URL en base á información que obtedes do servizo.
 
* '''IMPORTANTE:''' Cando amosedes imaxes dunha api, tedes que ir á documentación do servizo e ver como 'construír' a URL en base á información que obtedes do servizo.
 
: Por exemplo, neste caso se premedes no enlace que aparece á esquerda que pon images: https://api.artic.edu/docs/#images
 
: Por exemplo, neste caso se premedes no enlace que aparece á esquerda que pon images: https://api.artic.edu/docs/#images
−
: Vedes que recomendan empregar esta url para as imaxes: https://www.artic.edu/iiif/2/{identifier}/full/843,/0/default.jpg
+
: Vedes que recomendan empregar esta url para as imaxes: <pre>https://www.artic.edu/iiif/2/{identifier}/full/843,/0/default.jpg</pre>
 
:* O 843 é o tamaño e podemos poñer o que queiramos.
 
:* O 843 é o tamaño e podemos poñer o que queiramos.
 
:* O {identifier} é o dato que ven do servizo.
 
:* O {identifier} é o dato que ven do servizo.

Revisión actual del 12:19 2 abr 2025

Introdución

  • Unha promise ven ser unha petición que realizamos de forma asíncrona a un servidor e que permite que o código do cliente continúe a súa execución.
Una promesa ten tres estados:
  • Resolved: Unha promesa normalmente vai solicitar unha información a un servidor. Cando dispón de dita información pasa ao estado resolved.
  • Rejected: Cando a promesa non devolve un valor ou cando se produce unha excepción debido a que o valor devolto non ten o formato correcto.
  • Pending: Cando xa iniciamos a petición e aínda non tivemos resposta.
Unha promesa pode pasar do estado pending a resolved ou rejected e non pode ter transaccións entre os estados.


  • Fetch tamén realiza unha operación asíncrona e devolve unha promesa xa preparada para o seu uso. Ten asociados tres métodos:
  • .then(): Onde se reciben os datos.
  • .catch(): Se se produce algunha excepción
  • .finally(): Un código que podemos executar tanto se foi ben (then) como se foi mal (catch) a chamada a obtención de datos de forma asíncrona.


  • Se os dous fan o mesmo, en que se diferencian ?
Digamos que promise, que é parte da linguaxe JavaScript, é mais de 'proposito xeral'. Permite facer calquera tipo de petición asíncronas e permite executar múltiples operacións asíncronas e executalas en orde, unha despois de outra.
Fetch pola súa parte, é unha función da API Fetch que está orientada a ser empregada para facer peticións de rede e recibir información de ditas solicitudes (por exemplo empregando HTTP Requests).


  • Nos imos ver fetch xa que o imos empregar para realizar peticións a API Rest e obter os resultados.



Preparación

Aínda que se pode probar dende calquera proxecto, eu parto de que tedes un proxecto Laravel 10 có seguinte:
Arquivo: /routes/web/web.php
Route::get('/probas', function () {
    return view('probas');
})->name('probas');
Fixádevos que a ruta vai directamente á vista e non pasa por un controlador. Isto é debido a que os datos que vou amosar os vou cargar dende o cliente empregando fetch. Isto non quita que nos vosos proxectos pasedes por un controlador para facer unha xestión ou recuperar datos dunha base de datos.


Arquivo: /resources/views/principal.blade.php
<html>
    <head>
        <meta charset="UTF-8">
        <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" />
        <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    </head>
    <body>
<nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
            <a class="nav-link" href="{{route('probas')}}">Probas</a>
        </li>

      </ul>
   </div>
  </div>
</nav>


        @yield('content')

        @yield('antesdefinbody')
    </body>

</html>
  • Fixarse que creo dúas seccións:
  • 'content' onde irán os contidos da páxina
  • 'antesdefinbody': onde irán os arquivos javascript que farán o fetch dos datos.


Arquivo: /resource/views/probas.blade.php
@extends('principal')


@section('content')

<h3>Probas</h3>
<div class="container text-center mt-5">
    <input type="button" value="CARGAR DATOS DE INTERNET" onclick="javascript:cargarProbas()"/>
    <h5>Cargando datos dende internet</h5>
    <div id='idProbaImaxe'></div>
</div>

@endsection

@section('antesdefinbody')
    <script src="{{asset('js/cargarProba1.js')}}"></script>
@endsection
  • Fixarse como na sección 'antesdefinbody' cargo os arquivos javascript. Isto poderíamos facelo localmente pero desta forma, a nivel de mantemento e claridade queda mellor.


Arquivo: /public/js/cargarProba1.js
function cargarProbas(){
}
  • Aquí irá o código javascript que iremos poñendo en cada proba que fagamos.



Funcionamento

  • Máis información en:


  • IMPORTANTE: Tedes que ter claro que este código se executa no cliente (no navegador). Polo tanto a información se obtén directamente da fonte sen necesidade de volver a cargar a páxina, como fixemos ata o de agora. Isto ten vantaxes e desvantaxes.
Vantaxes:
  • Liberade carga de traballo do servidor, sempre que a información a recuperar se atope noutro servidor diferente.
  • Non se ten que volver a cargar a páxina enteira, soamente aquelas partes nas que queirades actualizar a información.
  • Latencia de carga menor xa que accedes directamente á información sen pasar polo servidor.
Desvantaxes:
  • Non podedes empregar métodos de validación para obter a información xa que os token's estarían visibles para todo o mundo.
  • Política do Mesmo Orixen (CORS): Restriccións de CORS se o servizo externo non permite explicitamente solicitudes dende o teu dominio.
  • Xestión de Erros: Debes manexar os posibles erros de rede e os casos no que o servizo externo estea inaccesible.



Exemplo sinxelo

  • O funcionamento é moi sinxelo.
Recordar que isto é javascript, e polo tanto o código terá que ir entre etiquetas <script> </script> ou ben poñer o código nun arquivo separado e facer un <script src="arquivo.js"></script>


Retorna 4 campos. Imos visualizar na consola o que nos devolve.
  • Imos facelo empregando o proxecto de Laravel anterior.


Arquivo: /public/js/cargarProba1.js
function cargarProba1(){
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    fetch(url)
        .then(function(response) {
                if(response.ok){
                    console.log(response);
                }
                else{
                    console.log("Resposta de rede OK pero resposta HTTP no ok")
                }

            }
        )
        .catch(function(error) {
            console.error('Erro ao cargar:', error);
        });
}


Arquivo: /resources/views/probas.blade.php
@extends('principal')


@section('content')

<h3>Probas</h3>
<div class="container text-center mt-5">
    <input type="button" value="CARGAR DATOS DE INTERNET" onclick="javascript:cargarProba1()"/>
    <h5>Cargando datos dende internet</h5>
    <div id='idProba1'></div>
</div>

@endsection

@section('antesdefinbody')
    <script src="{{asset('js/cargarProbas.js')}}"></script>
@endsection


  • Temos que ter o proxecto laravel en funcionamento coa orde: php artisan serve
Isto fai que o servidor web local estea escoitando no porto 8000. Cargamos páxina de probas poñendo no navegador: http://localhost:8000/probas






  • Agora imos facer algunha mellora ao código anterior.
Como vemos, dentro do then, imos a executar unha función anónima que recibe como parámetro un obxecto da clase Response, que chamamos response: .then(function(response) {}
Nota: Lembrar recargar a páxina para que cargue o novo código.


Iso é equivalente a poñer isto:
function cargarProba1(){
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    fetch(url)
        .then(response => {
                if(response.ok){
                    console.log(response);
                }
                else{
                    console.log("Resposta de rede OK pero resposta HTTP no ok")
                }

            }
        )
        .catch(error => {
            console.error('Erro ao cargar:', error);
        });
}


  • Agora imos avanzar un pouco máis.
A nos o que nos interesa é o corpo da resposta e non o obxecto response que engloba a resposta e outra información, como o estado da resposta (propiedade status).
Para obtela, imos convertir a resposta en un obxecto javascript o array de javascript (dependendo do tipo de resposta).
Nota: Lembrar recargar a páxina para que cargue o novo código.
function cargarProba1(){
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    fetch(url)
        .then(response => {
                if(response.ok){
                    return response.json();
                }
                else{
                    console.log("Resposta de rede OK pero resposta HTTP no ok")
                }

            }
        )
        .then(datos => {
            console.log(datos);
            console.log('TITULO:' + datos.title);
            console.log(`body:${datos.body}`);
        }
        )
        .catch(error => {
            console.error('Erro ao cargar:', error);
        });
}


Fixarse o que estamos a facer neste código. Unha vez recuperamos o obxecto response, facemos un return de response.json().
O que vai facer .json() é extraer o corpo da mensaxe e pasalo a un obxecto javascript. Isto o vai facer retornando unha promesa. Isto quere dicir que para obter o corpo o vai facer de forma asíncrona e agora por tanto, necesitamos facer un 'then' para obter a resposta (segundo then da liña 14).
Ao igual que có fetch, o resultado (then) vai vir nunha variable que chamo 'datos' e amoso dito dato en consola.
Fixarse como para obter un dato concreto poñemos punto e o nome do campo. Podemos empregar o máis para concatenar ou a comilla orientada cara a dereita e empregar dentro de ditas comillas a formato: ${variable}


  • Agora o que necesitamos é visualizar dito contido na páxina HTML. Para iso imos obter un obxecto que vai representar o div con id='idProba1' e imos engadirlle contido dinamicamente.
Nota: Lembrar recargar a páxina para que cargue o novo código.
function cargarProba1(){
    const url = 'https://jsonplaceholder.typicode.com/posts/1';
    fetch(url)
        .then(response => {
                if(response.ok){
                    return response.json();
                }
                else{
                    console.log("Resposta de rede OK pero resposta HTTP no ok")
                }

            }
        )
        .then(datos => {
            const contenedor = document.getElementById('idProba1');
            contenedor.innerHTML=`TITULO: <strong>${datos.title}</strong>`;
        }
        )
        .catch(error => {
            console.error('Erro ao cargar:', error);
        });
}
Liña 15: Obtemos nunha constante o div en forma de obxecto javascript.
Liña 16: Cambiamos a propiedade innerHTML xa que imos engadir código html (strong neste caso) ao seu contido. Se fora soamente texto poderíamos empregar innerText



Resolvendo problemas

  • Empregando javascript é doado que vos equivoquedes en algo. Como teredes que facer para descubrir que está a pasar ?
Cada navegador é diferente, eu vou explicalo para Firefox, pero todos teñen algo equivalente.
O que tedes que facer é empregar a consola.







Recuperando moitas filas


  • Imos crear unha nova proba que recupere moitas 'filas' de información.
Empregaremos esta URL: https://jsonplaceholder.typicode.com/posts
A única diferenza vai ser que agora imos visualizar un conxunto de resultados. A nivel de HTML o imos facer empregando unha táboa, por exemplo.
Preparemos todo.

Arquivo /app/resources/views/probas.blade.php 

....
<h3>Probas</h3>
<div class="container text-center mt-5">
    <input type="button" value="CARGAR DATOS DE INTERNET" onclick="javascript:cargarProba1()"/>
    <h5>Cargando datos dende internet</h5>
    <div id='idProba1'></div>
</div>
<div class="container text-center mt-5">
    <input type="button" value="CARGAR MOITAS FILAS DE DATOS DE INTERNET" onclick="javascript:cargarProba2()"/>
    <h5>Cargando moitas filas de datos dende internet</h5>
    <div id='idProba2' style='display:none'>
        <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">Title</th>
                <th scope="col">Body</th>
              </tr>
            </thead>
            <tbody id='tBody'>
            </tbody>
        </table>
    </div>
</div>
Como vedes, chamamos a outra función de javascript: cargarProba2() e o id do div é diferente (idProba2).
Para non ter que xerar toda a estrutura da táboa empregando javascript, xa a temos creada pero invisible.
Cando premamos o botón, cambiaremos o display a block e iremos engadindo dinamicamente filas (tr) ao tbody có id tBody.



Arquivo /app/public/cargarProbas.js 

......
function cargarProba2(){
    const url = 'https://jsonplaceholder.typicode.com/posts';
    fetch(url)
        .then(response => {
                if(response.ok){
                    return response.json();
                }
                else{
                    console.log("Resposta de rede OK pero resposta HTTP no ok")
                }

            }
        )
        .then(datos => {
            const corpoTaboa = document.getElementById('tBody');
            const divTabla = document.getElementById('idProba2');
            divTabla.style.display="block";
            datos.forEach(element => {

                const fila = document.createElement('tr');
                const col1 = document.createElement('td');
                col1.textContent = element.title;
                const col2 = document.createElement('td');
                col2.textContent = element.body;
                fila.appendChild(col1);
                fila.appendChild(col2);
                corpoTaboa.appendChild(fila);
            });

        }
        )
        .catch(error => {
            console.error('Erro ao cargar:', error);
        });
}
  • Como vedes o procedemento sempre é o mesmo.
  • Empregamos fetch para recuperar os datos e convertilos a json.
  • Fago que o div con id 'idProba2' se faga visible. Lembrar que dentro de dito div se atopa a estrutura da táboa onde imos a amosar os datos.
  • Obteño o obxecto javascript que representa o tbody da táboa (constante corpoTaboa)
  • En datos veñen todas as filas. Fago un foreach e element representa cada unha das filas cós campos title e body so servizo web.
Por cada dato, creo un elemento tr, dous elementos td, engado os elementos td ao tr e engado a tr ao tbody para crear a táboa.





  • Pois isto é a base de calquera petición que fagades empregando fetch.
Nos imos empregalo para obter datos empregando GET e peticións a unha API RestFul aberta que non necesite token de acceso, pero poderíamos empregalo para moito máis.


Exemplo de solicitude POST: 

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // Método HTTP
  headers: {
    'Content-Type': 'application/json', // Indica o tipo de contido que se está enviando
  },
  body: JSON.stringify({ // Convirte o obxecto JavaScript nunha cadea JSON
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log(data));



Exemplo de emprego de headers personalizados

Neste exemplo, un suposta API Restful pide un token de autenticación.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
  headers: {
    'Authorization': 'Bearer o teu_token_de_acceso_aquí',
  },
})
  .then(response => response.json())
  .then(data => console.log(data));




  • Fixarse que no exemplo anterior, cargamos o contido cando prememos sobre o botón.
Pero podemos facelo en calquera evento que poidamos controlar con Javascript.
Así por exemplo, se quero que se execute algo cando remata de cargar o documento, o podo facer desta forma:
Arquivo javascript referenciado pola páxina html
document.addEventListener('DOMContentLoaded', function () {
  // Código a executar cando remate de cargar a páxina web

}




Recuperar datos dende unha ApiRestFul feita por nos


Preparación

Lembrar que é un proxecto en Laravel, que responde ás seguintes rutas:




  • O que imos facer e empregar o proxecto Laravel que estamos a desenvolver nesta UD, e que faga uso do servizo. Para simplificalo soamente imos recuperar datos, sen necesidade de autenticar, pero lembrar que vimos antes para operacións que podemos facer empregando then (enviar un token, POST,...).
  • O primeiro que imos facer é levantar o servizo creado na UD5. Para iso ide a unha consola e sobre o cartafol onde está o proxecto, levantade LARAVEL pero cambiando o porto por defecto. Escribe: php artisan serve --port 8001
Agora, o proxecto de Laravel que queira facer uso da URL para obter información terá que empregar a URL (por exemplo): http://localhost:8001/api/v1/marcas/1/perfumes
Loxicamente se estivéramos en produción teríamos que ter un dominio mercado e non empregaríamos localhost.


  • O noso proxecto empregará estas dúas rutas do servizo:



  • No proxecto Laravel que creamos nesta UD (non empregar o da UD5 do servizo),imos modificar o arquivo /app/resources/views/principal.blade.php:
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
            <a class="nav-link" href="{{route('perfumes_por_marca')}}">Perfumes por marca</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{route('probas')}}">Probas</a>
        </li>

      </ul>
   </div>



Arquivo /app/routes/web.php 

Route::get('/perfumes_por_marca', function () {
    return view('perfumes_por_marca');
})->name('perfumes_por_marca');



Programación

  • Imos crear a vista que vai dar resposta á ruta anterior. Como vos levo dicindo, non paso a través dun controlador xa que a vista soamente vai amosar os datos obtidos empregado o servizo web, pero nada impide pasar por un controlador, facer calquera tipo de xestión, como recuperar datos da base de datos Mysql e amosar a vista.

Arquivo: /app/resource/views/perfumes_por_marca.blade.php 

@extends('principal')


@section('content')

<h3>Amosa os perfumes por marca empregando fetch</h3>
<div class="container text-center mt-5">
    <select id="selectMarcas" onchange="">

    </select>
</div>
<div class="container text-center mt-5">
    <div class="row justify-content-center">
      <div class="col-sm-10">
        <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th scope="col">Descripción</th>
                <th scope="col">Prezo</th>
                <th scope="col">Data Compra</th>
              </tr>
            </thead>
            <tbody id='tbodyPerfumes'>

            </tbody>
          </table>
      </div>
    </div>
</div>
@endsection

@section('antesdefinbody')
    <script src="{{asset('js/cargarMarcas.js')}}"></script>
@endsection


  • O primeiro que imos facer é cargar as marcas. Para iso vou empregar un arquivo javascript que debe estar creado en /app/public/js/cargarMarcas.js.
Neste punto deberíades ser capaces de facelo sen mirar a solución, mirando o dado no punto anterior desta unidade.
Neste exemplo, a lista de marcas se cargan ao cargarse á páxina, pero poderíamos ter un botón 'Cargar Marcas' para facelo.


A solución sería:

Arquivo /app/public/js/cargarMarcas.js 

// Contenido de cargarMarcas.js
document.addEventListener('DOMContentLoaded', function () {
    const url = 'http://localhost:8001/api/v1/marcas';
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(datos => {
            const select = document.getElementById('selectMarcas');
            const option = document.createElement('option');
            option.value = -1;
            option.textContent = "ESCOLLE MARCA";
            select.appendChild(option);
            datos.data.forEach(marca => {
                const option = document.createElement('option');
                option.value = marca.id;
                option.textContent = marca.descripcion;
                select.appendChild(option);
            });
        })
        .catch(error => {
            console.error('Error al cargar las marcas:', error);
        });
});


  • Como vedes o procedemento é o mesmo que no exemplo primeiro.
  • Empregamos fetch coa URL do servizo que devolve as marcas dos perfumes.
  • Convertemos a resposta a json.
  • Obtemos á referencia ao SELECT de html.
  • Lembrar que o servizo devolve os datos nun campo data.
Facemos por tanto un foreach por ese campo.
  • Creamos un elemento OPTION (que van ser cada unha das entradas do SELECT) por cada fila de datos e engadimos ao select dito elemento.


  • Unha vez temos as marcas, necesitamos que cando prememos nunha, cargue os perfumes asociados a dita marca.
Lembrar que a URL a empregar é: http://localhost:8001/api/v1/marcas/${idMarca}/perfumes
Ese id de marca o tedes que obter do elemento seleccionado no SELECT de html. Para iso podedes empregar a propiedade 'value' do obxecto javascript cando teñades a referencia e lembrar que se queredes empregar a url anterior e que substitúa ${idMarca} polo seu valor, ten que ir entre comillas orientadas á dereita => `
Intentádeo facelo sen mirar a solución. Quen se atreva, a data está cambiada ao formato español, empregando a función split de javascript.





Arquivo: /app/resource/views/perfumes_por_marca.blade.php 

@extends('principal')


@section('content')

<h3>Amosa os perfumes por marca empregando fetch</h3>
<div class="container text-center mt-5">
    <select id="selectMarcas" onchange="javascript:buscarPerfumesPorMarca()">

    </select>
</div>
<div class="container text-center mt-5">
    <div class="row justify-content-center">
      <div class="col-sm-10">
        <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th scope="col">Descripción</th>
                <th scope="col">Prezo</th>
                <th scope="col">Data Compra</th>
              </tr>
            </thead>
            <tbody id='tbodyPerfumes'>

            </tbody>
          </table>
      </div>
    </div>
</div>
@endsection

@section('antesdefinbody')
    <script src="{{asset('js/cargarMarcas.js')}}"></script>
    <script src="{{asset('js/cargarPerfumesPorMarca.js')}}"></script>
@endsection



Arquivo /app/public/js/cargarPerfumesPorMarca.js 

function buscarPerfumesPorMarca(){
    const idMarca = document.getElementById('selectMarcas').value;
    const url = `http://localhost:8001/api/v1/marcas/${idMarca}/perfumes`;
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(datos => {
            const tbody = document.getElementById('tbodyPerfumes');
            tbody.innerHTML="";
            datos.data.forEach(perfume => {
                const tr = document.createElement('tr');
                const td = document.createElement('td');
                td.innerText = perfume.descripcion;
                tr.appendChild(td);
                const td2 = document.createElement('td');
                td2.innerText = perfume.prezo;
                tr.appendChild(td2);
                const td3 = document.createElement('td');
                var fechaEspanol = '';
                if(perfume.data_compra){
                    const componentesFecha = perfume.data_compra.split("-"); // Divide la cadena en un array
                    fechaEspanol = `${componentesFecha[2]}-${componentesFecha[1]}-${componentesFecha[0]}`;
                }
                td3.innerText = fechaEspanol;
                tr.appendChild(td3);
                tbody.appendChild(tr);
            });
        })
        .catch(error => {
            console.error('Error al cargar las marcas:', error);
        });
}




Recuperar datos dende unha ApiRestFul de Internet

  • O proceso é igual que no caso anterior, pero esta vez empregando unha APIRESTFUL real que exista en Internet.
Podedes buscar por Internet onde se atopan ditos servizos de acceso libre ou por rexistro (empregando un token) e obter a información que suministran.
Fixádevos nas columnas:
  • Auth: Indica se necesitades empregar unha API Key para acceder ao servizo (xa vimos como empregala)
  • Https: Indica se podedes empregar URL do tipo https://url para acceder ao servizo
  • CORS: Dependendo de como esté configurado o servidor, indica que as peticións dende clientes empregando Javascript non están permitidas. Se a petición a facemos dende un servidor web empregando PHP (por exemplo Laravel) si estaría permitido.
O sitio anterior ten moitisimas api, pero moitas delas non funcionan, polo que antes de poñervos a programar, facede algunha proba contra o servizo.
Para iso lembrar que xa vimos na UD5, como probar as rutas empregando complementos dos navegadores .



Concretamente a URL: https://api.artic.edu/api/v1/artworks
Dita URL devolve no campo data a lista de cadros de artistas.
Vou amosar os campos: title, artist_display, dimensions e img.


  • IMPORTANTE: Cando amosedes imaxes dunha api, tedes que ir á documentación do servizo e ver como 'construír' a URL en base á información que obtedes do servizo.
Por exemplo, neste caso se premedes no enlace que aparece á esquerda que pon images: https://api.artic.edu/docs/#images
Vedes que recomendan empregar esta url para as imaxes: 
https://www.artic.edu/iiif/2/{identifier}/full/843,/0/default.jpg
  • O 843 é o tamaño e podemos poñer o que queiramos.
  • O {identifier} é o dato que ven do servizo.


  • Intentade facer vos o código necesario para cargar vos nunha táboa, os datos anteriores ao premer nun botón.









Arquivo /app/resources/views/principal.blade.php 

..........
        <li class="nav-item">
            <a class="nav-link" href="{{route('datos_internet')}}">Datos de Internet</a>
        </li>

..........


Arquivo /app/routes/web.php 

Route::get('/datos_por_internet', function () {
    return view('datos_por_internet');
})->name('datos_internet');


Arquivo /app/resources/views/datos_por_internet.blade.php 

@extends('principal')


@section('content')

<h3>Amosa os datos dunha API Rest Ful aberta de Internet</h3>
<div class="container text-center mt-5">
    <input type="button" value="CARGAR DATOS DE INTERNET" onclick="javascript:cargarDatosDeInternet()"/>
</div>
<div class="container text-center mt-5">
    <div class="row justify-content-center">
      <div class="col-sm-10">
        <table class="table table-hover table-striped">
            <thead>
              <tr>
                <th scope="col">Tipo</th>
                <th scope="col">Nome</th>
                <th scope="col">Ano</th>
                <th scope="col">Imaxe</th>
              </tr>
            </thead>
            <tbody id='tbodyDatos'>

            </tbody>
          </table>
      </div>
    </div>
</div>
@endsection

@section('antesdefinbody')
    <script src="{{asset('js/datos_por_internet.js')}}"></script>
@endsection


Arquivo /app/public/js/datos_por_internet 

function cargarDatosDeInternet(){
    const url = 'https://api.artic.edu/api/v1/artworks';
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(datos => {
            const tbody = document.getElementById('tbodyDatos');
            tbody.innerHTML="";
            datos.data.forEach(arte => {
                const tr = document.createElement('tr');
                const td = document.createElement('td');
                td.innerText = arte.title;
                tr.appendChild(td);
                const td2 = document.createElement('td');
                td2.innerText = arte.artist_display;
                tr.appendChild(td2);
                const td3 = document.createElement('td');
                td3.innerText = arte.dimensions;
                tr.appendChild(td3);
                tbody.appendChild(tr);
                const td4 = document.createElement('td');
                const img = document.createElement('img');
                img.src = `https://www.artic.edu/iiif/2/${arte.image_id}/full/200,/0/default.jpg`;
                td4.appendChild(img);
                tr.appendChild(td4);
                tbody.appendChild(tr);


            });
        })
        .catch(error => {
            console.error('Error al cargar las marcas:', error);
        });
}





Volver á UD7



-- Ángel D. Fernández González -- (2024).

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=PHP_Promise_e_Fetch&oldid=23426»