Artículo original escrito por Kingsley Ubah
Artículo original Fetch API – How to Make a GET Request and POST Request in JavaScript
Traducido y adaptado por Michael M. Liendo
A menudo, es posible que desee que su sistema se comunique con otros servidores web para obtener información.
Por ejemplo, digamos que un nuevo usuario desea registrarse para obtener una cuenta en su sitio web. Y en lugar de tener que completar manualmente un formulario para enviar su información a su sistema, quieren usar su información que ya está en otro servicio o plataforma (es decir, autenticación de terceros) para registrarse.
En tal caso, su sistema tiene que comunicarse con el sistema del tercero para obtener la información de ese usuario. Y lo hace a través de una API.
Una API, o interfaz de programación de aplicaciones, es solo un conjunto de reglas que guían cómo un software o sistema se comunica con otro.
Si su aplicación es una aplicación de una sola página construida con un lenguaje de programación asincrónico como JavaScript, tiene una herramienta útil para llevar a cabo esa función: fetch().
¿Qué es la API Fetch?
fetch() es un mecanismo que le permite realizar llamadas simples AJAX (JavaScript asíncrono y XML) con JavaScript.
Asincrónico significa que puede usar fetch para realizar una llamada a una API externa sin detener la ejecución de otras instrucciones. De esa manera, otras funciones en el sitio continuarán ejecutándose incluso cuando no se haya resuelto una llamada a la API.
Cuando se envía una respuesta (datos) desde la API, se reanudan las tareas asincrónicas (recuperación).
Sin embargo, es importante tener en cuenta que la recuperación no forma parte de la especificación de JavaScript, sino de WWTAG. Como resultado, no podrá usarlo en un entorno Node.js (a menos que instale un módulo especial).
Cómo utilizar fetch() en JavaScript
Cuando hablamos de API, también necesitamos hablar de endpoints. Un endpoints es simplemente una URL única a la que llama para interactuar con otro sistema.
Supongamos que estamos haciendo una solicitud a una API externa para obtener algunos datos (como una publicación de blog). Para esto, usaremos una simple solicitud GET.
Simplemente llama a fetch() con la URL del punto final como argumento:
fetch('https://ubahthebuilder.tech/posts/1');El cuerpo de respuesta para este punto final será información sobre una publicación de blog:
{
userId: 1,
id: 1,
title: 'A post by Kingsley',
body: 'Brilliant post on fetch...',
};En última instancia, querrás obtener el cuerpo de respuesta. Pero el objeto de respuesta contiene bastante información más allá del cuerpo, incluido el código de estado, los encabezados y más información.
Ten en cuenta que la API de recuperación devuelve una promesa. Debido a esto, necesitas anidar un método then() para manejar la resolución.
Los datos devueltos por la API no suelen estar en una forma utilizable. Por lo tanto, deberás convertir los datos a un formulario con el que puedas operar tu JavaScript. Afortunadamente, puedes usar el método json() para hacer precisamente eso:
fetch('https://ubahthebuilder.tech/posts/1')
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});Como puedes ver en el código anterior, puede anidar un método then() posterior para analizar los datos (saqué solo el título en nuestro caso)
En este ejemplo, simplemente queríamos obtener una publicación de blog de la API. Pero, ¿y si quisiéramos publicar una historia en su lugar?
Cómo realizar una solicitud POST
Una vez que vayas más allá de las solicitudes GET, deberás configurar algunas opciones más. Hasta ahora, solo has proporcionado un único argumento para fetch(): el punto final de la URL.
Para una solicitud de publicación, deberás pasar un objeto de opciones de configuración como segundo argumento. El objeto opcional puedes tomar muchos parámetros diferentes. En este caso, incluye solo la información más necesaria.
Como estás enviando una solicitud POST, deberás declarar que está utilizando el método POST.
También deberás pasar algunos datos para crear realmente la nueva publicación de blog. Dado que estás enviando datos JSON, deberás establecer un encabezado de Content-Type establecido en application / json. Finalmente, necesitarás el cuerpo, que será una sola cadena de datos JSON.
const update = {
title: 'A blog post by Kingsley',
body: 'Brilliant post on fetch API',
userId: 1,
};
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(update),
};Y luego, la llamada a la API:
fetch('https://jsonplaceholder.typicode.com/posts', options)
.then(data => {
if (!data.ok) {
throw Error(data.status);
}
return data.json();
}).then(update => {
console.log(update);
// {
//
title: 'A blog post by Kingsley',
//
body: 'Brilliant post on fetch API',
//
userId: 1,
//
id: 101
// };
}).catch(e => {
console.log(e);
});Si tu solicitud es exitosa, obtendrás un cuerpo de respuesta que contiene el objeto de la publicación del blog junto con una nueva ID. La respuesta variará dependiendo de cómo esté configurada la API.
Por último, debes tener en cuenta que los puntos finales pueden cambiar con el tiempo y las APIs pueden reestructurarse. Por lo tanto, debes juntar todas tus llamadas de recuperación para facilitar el acceso.
Conclusión
Aquí hay algunos puntos para resumir este artículo:
- Los sistemas informáticos, como el software, se comunican entre sí y comparten información a través de una capa llamada API.
- Una API contiene el conjunto de reglas y protocolos que guían cómo interactúan dos o más sistemas. Por ejemplo, el sistema de Facebook puede interactuar con el sistema de Google para obtener información sobre un usuario a través de una API.
- En JavaScript front-end, puedes realizar llamadas API simples con la utilidad
fetch(). - Para realizar una solicitud GET simple con fetch, solo necesitas pasar el punto final de la URL como argumento.
- Para realizar una solicitud POST, deberás transmitir algunos otros parámetros, incluido un objeto de configuración.
Si te gustó mi artículo y quieres ofrecer tu apoyo, por favor visita mi página Cómprame un café.
Gracias y nos vemos pronto.