Tutorial de la API de recuperación de JavaScript con ejemplos de encabezado y publicación de JS Fetch

Si está escribiendo una aplicación web, es probable que tenga que trabajar con datos externos. Puede ser su propia base de datos, API de terceros, etc.

Cuando apareció AJAX por primera vez en 1999, nos mostró una mejor manera de crear aplicaciones web. AJAX fue un hito en el desarrollo web y es el concepto central detrás de muchas tecnologías modernas como React.

Antes de AJAX, tenía que volver a renderizar una página web completa incluso para actualizaciones menores. Pero AJAX nos dio una forma de obtener contenido del backend y actualizar los elementos seleccionados de la interfaz de usuario. Esto ayudó a los desarrolladores a mejorar la experiencia del usuario y a construir plataformas web más grandes y complicadas.

Curso intensivo sobre API REST

Ahora estamos en la era de las API RESTful. En pocas palabras, una API REST le permite enviar y extraer datos de un almacén de datos. Puede ser su base de datos o el servidor de un tercero como la API de Twitter.

Hay algunos tipos diferentes de API REST. Veamos los que usará en la mayoría de los casos.

  • OBTENER  : obtenga datos de la API. Por ejemplo, obtenga un usuario de Twitter según su nombre de usuario.
  • POST  : envía datos a la API. Por ejemplo, cree un nuevo registro de usuario con nombre, edad y dirección de correo electrónico.
  • PUT  : actualiza un registro existente con nuevos datos. Por ejemplo, actualice la dirección de correo electrónico de un usuario.
  • BORRAR  : elimina un registro. Por ejemplo, elimine un usuario de la base de datos.

Hay tres elementos en cada API REST. La solicitud, la respuesta y los encabezados.

Solicitud  : estos son los datos que envía a la API, como una identificación de pedido para obtener los detalles del pedido.

Respuesta  : cualquier dato que reciba del servidor después de una solicitud exitosa o fallida.

Encabezados  : metadatos adicionales que se pasan a la API para ayudar al servidor a comprender qué tipo de solicitud está tratando, por ejemplo, "tipo de contenido".

La ventaja real de utilizar una API REST es que puede crear una única capa de API para que trabajen varias aplicaciones.

Si tiene una base de datos que desea administrar mediante una aplicación web, móvil y de escritorio, todo lo que necesita es una única capa de API REST.

Ahora que sabe cómo funcionan las API REST, veamos cómo podemos consumirlas.

XMLHttpRequest

Antes de que JSON se apoderara del mundo, el formato principal de intercambio de datos era XML. XMLHttpRequest () es una función de JavaScript que hizo posible obtener datos de las API que devolvieron datos XML.

XMLHttpRequest nos dio la opción de obtener datos XML del backend sin recargar toda la página.

Esta función ha crecido desde sus días iniciales de ser solo XML. Ahora es compatible con otros formatos de datos como JSON y texto sin formato.

Escribamos una simple llamada XMLHttpRequest a la API de GitHub para recuperar mi perfil.

// function to handle success function success() { var data = JSON.parse(this.responseText); //parse the string to JSON console.log(data); } // function to handle error function error(err) { console.log('Request Failed', err); //error details will be in the "err" object } var xhr = new XMLHttpRequest(); //invoke a new instance of the XMLHttpRequest xhr.onload = success; // call success function if request is successful xhr.onerror = error; // call error function if request failed xhr.open('GET', '//api.github.com/users/manishmshiva'); // open a GET request xhr.send(); // send the request to the server.

El código anterior enviará una solicitud GET a //api.github.com/users/manishmshiva para obtener mi información de GitHub en JSON. Si la respuesta fue exitosa, imprimirá el siguiente JSON en la consola:

Si la solicitud falló, imprimirá este mensaje de error en la consola:

Obtener API

La API Fetch es una versión más simple y fácil de usar de XMLHttpRequest para consumir recursos de forma asincrónica. Fetch le permite trabajar con API REST con opciones adicionales como almacenar datos en caché, leer respuestas de transmisión y más.

La principal diferencia es que Fetch funciona con promesas, no devoluciones de llamada. Los desarrolladores de JavaScript se han alejado de las devoluciones de llamada después de la introducción de promesas.

Para una aplicación compleja, puede fácilmente adquirir el hábito de escribir devoluciones de llamada que conducen al infierno de devolución de llamada.

Con promesas, es fácil escribir y manejar solicitudes asincrónicas. Si eres nuevo en las promesas, puedes aprender cómo funcionan aquí.

Así es como se vería la función que escribimos anteriormente si usara fetch () en lugar de XMLHttpRequest:

// GET Request. fetch('//api.github.com/users/manishmshiva') // Handle success .then(response => response.json()) // convert to json .then(json => console.log(json)) //print data to console .catch(err => console.log('Request Failed', err)); // Catch errors

El primer parámetro de la función Fetch siempre debe ser la URL. Fetch luego toma un segundo objeto JSON con opciones como método, encabezados, cuerpo de solicitud, etc.

Existe una diferencia importante entre el objeto de respuesta en XMLHttpRequest y Fetch.

XMLHttpRequest devuelve los datos como respuesta, mientras que el objeto de respuesta de Fetch contiene información sobre el objeto de respuesta en sí. Esto incluye encabezados, código de estado, etc. Llamamos a la función "res.json ()" para obtener los datos que necesitamos del objeto de respuesta.

Otra diferencia importante es que la API Fetch no arrojará un error si la solicitud devuelve un código de estado 400 o 500. Todavía se marcará como una respuesta exitosa y se pasará a la función 'entonces'.

Fetch solo arroja un error si se interrumpe la solicitud. Para manejar 400 y 500 respuestas, puede escribir lógica personalizada usando 'response.status'. La propiedad 'status' le dará el código de estado de la respuesta devuelta.

Excelente. Ahora que comprende cómo funciona la API de Fetch, veamos un par de ejemplos más, como pasar datos y trabajar con encabezados.

Trabajar con encabezados

Puede pasar encabezados utilizando la propiedad "encabezados". También puede usar el constructor de encabezados para estructurar mejor su código. Pero pasar un objeto JSON a la propiedad "headers" debería funcionar en la mayoría de los casos.

fetch('//api.github.com/users/manishmshiva', { method: "GET", headers: {"Content-type": "application/json;charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

Pasar datos a una solicitud POST

Para una solicitud POST, puede usar la propiedad "body" para pasar una cadena JSON como entrada. Tenga en cuenta que el cuerpo de la solicitud debe ser una cadena JSON, mientras que los encabezados deben ser un objeto JSON.

// data to be sent to the POST request let _data = { title: "foo", body: "bar", userId:1 } fetch('//jsonplaceholder.typicode.com/posts', { method: "POST", body: JSON.stringify(_data), headers: {"Content-type": "application/json; charset=UTF-8"} }) .then(response => response.json()) .then(json => console.log(json)); .catch(err => console.log(err));

The Fetch API is still in active development. We can expect better features in the near future.

However, most browsers support the use of Fetch in your applications. The chart below should help you figure out which browsers support it on the web and mobile apps.

I hope this article helped you understand how to work with the Fetch API. Be sure to try out Fetch for your next web application.

I regularly write about Machine Learning, Cyber Security, and DevOps. You can signup for my weekly newsletter here.