Cómo utilizar la API Fetch de JavaScript para obtener datos

Introducción

Hubo un tiempo en que XMLHttpRequestse usaba para hacer solicitudes de API. No incluía promesas y no permitía que el código JavaScript fuera limpio. Con jQuery, se podía usar la sintaxis más limpia de jQuery.ajax().

Ahora, JavaScript tiene su propia forma integrada de realizar solicitudes API. Se trata de la Fetch API, un nuevo estándar para realizar solicitudes al servidor con Promesas, pero que también incluye funciones adicionales.

En este tutorial, creará solicitudes GET y POST utilizando la API Fetch.

Implemente sus aplicaciones frontend desde GitHub con la plataforma de aplicaciones DigitalOcean . Deje que DigitalOcean se concentre en escalar su aplicación.

Prerrequisitos

Para completar este tutorial, necesitará lo siguiente:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .
• Un conocimiento básico de codificación en JavaScript, sobre el que puede obtener más información en la serie Cómo codificar en JavaScript .
• Comprensión de las promesas en JavaScript. Lea la sección Promesas de este artículo sobre el bucle de eventos, las devoluciones de llamadas, las promesas y async/await en JavaScript.

Paso 1: Introducción a la sintaxis de la API Fetch

Un enfoque para utilizar la API Fetch es pasar fetch()la URL de la API como parámetro:

fetch(url)

El fetch()método devuelve una Promesa. Después del fetch()método, incluya el método Promesa then():

fetch(url)  .then(function() {    // handle the response  })

Si la Promesa devuelta es , se ejecuta resolvela función dentro del método. Esa función contiene el código para manejar los datos recibidos de la API.then()

Después del then()método, incluya el catch()método:

fetch(url)  .then(function() {    // handle the response  })  .catch(function() {    // handle the error  });

La API que llamas fetch()puede estar inactiva o pueden ocurrir otros errores. Si esto sucede, rejectse devolverá la promesa. El catchmétodo se utiliza para gestionar reject. El código que se encuentra dentro catch()se ejecutará si ocurre un error al llamar a la API que elijas.

Una vez que comprenda la sintaxis para usar la API Fetch, ahora puede pasar a usarla fetch()en una API real.

Paso 2: uso de Fetch para obtener datos de una API

Los siguientes ejemplos de código se basarán en la API JSONPlaceholder . Con la API, obtendrá diez usuarios y los mostrará en la página mediante JavaScript. Este tutorial recuperará datos de la API JSONPlaceholder y los mostrará en elementos de lista dentro de la lista del autor.

Comience creando un archivo HTML y agregando un encabezado y una lista desordenada con el símbolo idde authors:

autores.html

h1Authors/h1ul/ul

Ahora, agrega scriptetiquetas al final de tu archivo HTML y usa un selector DOM para capturar el ul. Usa getElementByIdwith authorscomo argumento:

autores.html

h1Authors/h1ul/ulscript  const ul = document.getElementById('authors');/script

Recuerde, authorses idpara el creado previamente ul.

A continuación, crea un listque sea DocumentFragment:

autores.html

script  // ...  const list = document.createDocumentFragment();/script

Todos los elementos de la lista adjunta se agregarán a list. A DocumentFragmentno forma parte de la estructura de árbol del documento activo. Esto tiene la ventaja de no provocar redibujados que afecten el rendimiento cuando se modifica el modelo de objetos del documento.

Crea una variable constante llamada urlque contendrá la URL de la API que devolverá diez usuarios aleatorios:

autores.html

script  // ...  const url = 'https://jsonplaceholder.typicode.com/users';/script

Ahora, utilizando la API Fetch, llame a la API JSONPlaceholder usando fetch()with urlcomo argumento:

autores.html

script  // ...  fetch(url)/script

Estás llamando a la API Fetch y pasando la URL a la API JSONPlaceholder. Luego, se recibe una respuesta. Sin embargo, la respuesta que obtienes no es JSON, sino un objeto con una serie de métodos que se pueden usar según lo que quieras hacer con la información. Para convertir el objeto devuelto en JSON, usa el json()método.

Agregue el then()método que contendrá una función con un parámetro llamado response:

autores.html

script  // ...  fetch(url)    .then((response) = {})/script

El responseparámetro toma el valor del objeto devuelto desde fetch(url). Utilice el json()método para convertirlo responseen datos JSON:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })/script

Aún es necesario procesar los datos JSON. Agregue otra then()declaración con una función que tenga un argumento llamado data:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {})/script

Dentro de esta función, crea una variable llamada authorsque se establece igual a data:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {      let authors = data;    })/script

Para cada autor de authors, deberá crear un elemento de lista que muestre su nombre. El map()método es adecuado para este patrón:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {      let authors = data;      authors.map(function(author) {      });    })/script

Dentro de la mapfunción, crea una variable llamada lique se establecerá como igual a createElementcon li(el elemento HTML) como argumento. Además, crea un h2for namey un spanfor email:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {      let authors = data;      authors.map(function(author) {        let li = document.createElement('li');        let name = document.createElement('h2');        let email = document.createElement('span');      });    })/script

El h2elemento contendrá el namede author. El spanelemento contendrá el correo electrónico de author. La innerHTMLpropiedad y la interpolación de cadenas le permitirán hacer esto:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {      let authors = data;      authors.map(function(author) {        let li = document.createElement('li');        let name = document.createElement('h2');        let email = document.createElement('span');        name.innerHTML = `${author.name}`;        email.innerHTML = `${author.email}`;      });    })/script

A continuación, conecte estos elementos DOM con appendChild:

autores.html

script  // ...  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {      let authors = data;      authors.map(function(author) {        let li = document.createElement('li');        let name = document.createElement('h2');        let email = document.createElement('span');        name.innerHTML = `${author.name}`;        email.innerHTML = `${author.email}`;        li.appendChild(name);        li.appendChild(email);        list.appendChild(li);      });    })  ul.appendChild(list);/script

Tenga en cuenta que cada elemento de la lista se agrega al DocumentFragment list. Una vez que el mapestá completo, el listse agrega al ulelemento de la lista desordenada.

Una vez que hayas completado ambas then()funciones, puedes agregar la catch()función que registrará el posible error en la consola:

autores.html

script  // ...  fetch(url)    .then((response) = {      // ...    })    .then((data) = {      // ...    })    .catch(function(error) {      console.log(error);    });  // .../script

Este es el código completo de la solicitud que creaste:

autores.html

h1Authors/h1ul/ulscript  const ul = document.getElementById('authors');  const list = document.createDocumentFragment();  const url = 'https://jsonplaceholder.typicode.com/users';  fetch(url)    .then((response) = {      return response.json();    })    .then((data) = {      let authors = data;      authors.map(function(author) {        let li = document.createElement('li');        let name = document.createElement('h2');        let email = document.createElement('span');        name.innerHTML = `${author.name}`;        email.innerHTML = `${author.email}`;        li.appendChild(name);        li.appendChild(email);        list.appendChild(li);      });    }).    .catch(function(error) {      console.log(error);    });  ul.appendChild(list);/script

Acabas de realizar una solicitud GET con éxito mediante la API JSONPlaceholder y la API Fetch. En el siguiente paso, realizarás solicitudes POST.

Paso 3: Manejo de solicitudes POST

La obtención predeterminada son las solicitudes GET, pero puedes usar todos los demás tipos de solicitudes, cambiar los encabezados y enviar datos. Vamos a crear una solicitud POST.

Primero, incluya una variable constante que contenga el enlace a la API JSONPlaceholder:

nuevo-autor.js

const url = 'https://jsonplaceholder.typicode.com/users';

A continuación, debe configurar su objeto y pasarlo como segundo argumento de la función de búsqueda. Este será un objeto llamado datacon la clave namey el valor Sammy(o su nombre):

nuevo-autor.js

// ...let data = {  name: 'Sammy'}

Dado que se trata de una solicitud POST, deberá indicarlo explícitamente. Cree un objeto llamado fetchData:

nuevo-autor.js

// ...let fetchData = {}

Este objeto debe incluir tres claves: method, body, y headers:

nuevo-autor.js

// ...let fetchData = {  method: 'POST',  body: JSON.stringify(data),  headers: new Headers({    'Content-Type': 'application/json; charset=UTF-8'  })}

La methodclave tendrá el valor 'POST'. bodyse establecerá igual al JSON.stringify()formato del dataobjeto que se acaba de crear. headerstendrá el valor de 'Content-Type': 'application/json; charset=UTF-8'.

La Headersinterfaz es una propiedad de la API Fetch, que le permite realizar acciones en los encabezados de solicitud y respuesta HTTP. Este artículo llamado Cómo definir rutas y métodos de solicitud HTTP en Express puede brindarle más información.

Con este código en su lugar, la solicitud POST se puede realizar mediante la API Fetch. Incluirá urly fetchDatacomo argumentos para su fetchsolicitud POST:

nuevo-autor.js

// ...fetch(url, fetchData)

La then()función incluirá código que maneja la respuesta recibida de la API JSONPlaceholder:

nuevo-autor.js

// ...fetch(url, fetchData)  .then(function() {    // Handle response you get from the API  });

Este es el código completo de la solicitud que creaste:

nuevo-autor.js

const url = 'https://jsonplaceholder.typicode.com/users';let data = {  name: 'Sammy'}let fetchData = {  method: 'POST',  body: JSON.stringify(data),  headers: new Headers({    'Content-Type': 'application/json; charset=UTF-8'  })}fetch(url, fetchData)  .then(function() {    // Handle response you get from the API  });

Alternativamente, puedes pasar fetch()un Requestobjeto.

nueva-solicitud-de-autor.js

const url = 'https://jsonplaceholder.typicode.com/users';let data = {  name: 'Sammy'}let request = new Request(url, {  method: 'POST',  body: JSON.stringify(data),  headers: new Headers({    'Content-Type': 'application/json; charset=UTF-8'  })});fetch(request)  .then(function() {    // Handle response you get from the API  });

Con este enfoque, requestse puede utilizar como único argumento para fetch(), reemplazando urly fetchData.

Ahora conoce dos métodos para crear y ejecutar solicitudes POST con la API Fetch.

Conclusión

Si bien la API Fetch aún no es compatible con todos los navegadores, es una excelente alternativa XMLHttpRequest.

Si desea aprender cómo llamar a las API web usando React, consulte este artículo sobre este mismo tema.