Cómo usar la API Fetch en JavaScript

En el desarrollo web a menudo deberá conectarse/comunicarse con otros servidores web para obtener información/datos. Por ejemplo, al registrarse para una nueva cuenta en algunos sitios web, a menudo verá una opción para registrarse usando su Gmail u otras cuentas de terceros. Esto le permite registrarse para obtener una nueva cuenta con un solo clic en lugar de completar manualmente todo el formulario. Cuando selecciona la opción "Regístrese con una cuenta de terceros", la aplicación se comunica con el servidor de la aplicación de terceros y envía una solicitud para acceder a su información que se almacena allí. Esta solicitud se envía a través de API, que es un conjunto de reglas que rigen cómo las diferentes aplicaciones o sistemas se comunican entre sí. En este artículo aprenderemos a usar JavaScript para enviar tales solicitudes.

¿Cuál es la api de Fetch?

Fetch API proporciona un simple buscar() Método en JavaScript que se utiliza para obtener, acceder y manipular recursos en toda la red. El buscar() El método le permite hacer llamadas asincrónicas de JavaScript y XML (AJAX) con JavaScript que se hicieron previamente utilizando xmlhttprequest. Las solicitudes asíncronas se ejecutan paralelas al programa principal y no detengan la ejecución del código debajo de ellas. El código debajo de la solicitud de API de Fetch se seguirá funcionando incluso si la API no ha devuelto ninguna respuesta. Cuando la API responde a la llamada Ajax, entonces la buscar() se reanuda el método.

Fetch API utiliza promesas y proporciona características potentes que hacen que sea mucho más fácil manejar las solicitudes web y sus respuestas; Es una excelente manera de evitar la devolución de llamada que se crearon cuando se usa XMLHTTPREQUEST.

Nota: La consola del navegador se utiliza para la demostración de ejemplos en este artículo.

La sintaxis de la API de Fetch en JavaScript

Necesitamos llamar al buscar() Método para usar la API de Fetch en nuestro código JavaScript. El buscar() El método toma la URL de la API como argumento.

buscar (url)

Necesitamos definir el entonces() método después del buscar() método:

.entonces (function ()
)

El valor de regreso del buscar() El método es una promesa. Si esa promesa se resuelve, el código presente dentro del cuerpo del entonces() se ejecuta el método. El cuerpo de la entonces() El método debe contener el código que puede manejar los datos enviados por la API.

Entonces necesitamos definir el atrapar() método; el atrapar() El método solo se ejecuta en caso de que la promesa sea rechazada:

.Catch (function ()
);

Todo en todo el buscar() El método debería verse algo así:

buscar (url)
.entonces (function ()
)
.Catch (function ()
);

Ahora que comprendemos la sintaxis de la API de Fetch, ahora podemos pasar a los ejemplos del mundo real de usar la búsqueda() Método en una API real.

Cómo usar el método Fetch para obtener datos de una API

En este ejemplo, utilizaremos una API de usuario de GitHub para obtener los datos de información del usuario y mostrarlos en la consola utilizando solo Vanilla JavaScript; entonces empecemos:

Primero, crearemos una variable llamada url; Esta variable contendrá la URL de la API que devolverá los repositorios de un usuario nombrado Fabpot:

const url = 'https: // API.github.com/users/FabPot/Repos ';

Ahora usaremos el buscar() método para llamar a la API de usuario de GitHub;

buscar (url)

El buscar() El método toma la URL como argumento:

buscar (url)
.luego (función (datos)
)
)
.Catch (función (error)
);

En el código indicado anteriormente, hemos llamado a la API de Fetch para obtener los repositorios de un usuario nombrado Fabpot de Github. Hemos pasado la URL a la API de usuario de GitHub como argumento para obtener API. La API luego envía una respuesta que es un objeto con una serie de métodos; Estos métodos se pueden utilizar para realizar diferentes funciones sobre la información recibida. Si queremos convertir el objeto en JSON, entonces podemos usar el método json ().

Para convertir el objeto en json necesitamos agregar el entonces() método. El entonces() El método contendrá una función; La función tomará un argumento llamado respuesta:

buscar (url)
.entonces ((respuesta) =>)

El parámetro de respuesta se utiliza para almacenar el objeto que se devuelve desde la API. Este objeto se convierte en datos JSON utilizando el método JSON ():

buscar (url)
.entonces ((respuesta) => respuesta.json ())

Ahora podemos generar los datos en forma de JSON agregando otro entonces() declaración; Esta declaración contiene una función que toma una variable con nombre de datos como argumento:

.luego (función (datos)
)
)

Luego usamos la consola.Método log () dentro del cuerpo de la función para emitir los datos a la consola.

.luego (función (datos)
consola.Dato de registro);
)

Ahora agregaremos la función Catch () para registrar el error potencial a la consola en caso de que la promesa no esté cumplida:

.Catch (err
consola.error (err);
);

En general, la solicitud para obtener una lista de repositorios de los usuarios de GitHub debería verse algo así:

buscar (url)
.entonces ((respuesta) => respuesta.json ())
.entonces ((data) =>
consola.Dato de registro);
)
.Catch (err
consola.error (err);
);

En la captura de pantalla dada anteriormente se resolvió la promesa y el cuerpo del .entonces() Se ejecutaron el método. Si la promesa había permanecido sin resolver por alguna razón, entonces el cuerpo del .atrapar() se habría ejecutado el método que haría todo el manejo de errores. Acabamos de usar el .atrapar() método para imprimir un mensaje de error en caso de que la promesa no esté cumplida.

Conclusión

Comunicar y obtener datos de fuentes de terceros es una parte esencial del desarrollo web. Se logró mediante el uso de una herramienta compleja llamada xmlhttprequest que causó infiernos de devolución de llamada; Ahora se usa una herramienta mucho más simple llamada Fetch API para enviar llamadas AJAX en Vanilla JavaScript, ya que es mucho mejor para manejar las solicitudes AJAX. En esta publicación hemos aprendido a usar el método Fetch API para hacer llamadas AJAX en Vanilla JavaScript.