Introducción
Hubo un tiempo en que XMLHttpRequest se usaba para realizar solicitudes a la API. No incluía promesas y no generaba código JavaScript limpio. Con jQuery, puedes usar la sintaxis jQuery.ajax(), más limpia.
Ahora, JavaScript cuenta con su propia forma integrada de realizar solicitudes a la API. Se trata de la API Fetch, un nuevo estándar para realizar solicitudes al servidor con promesas, pero que incluye funciones adicionales.
En este tutorial, creará solicitudes GET y POST utilizando la API Fetch.
Requisitos previos
- Un entorno de desarrollo local para Node.js.
- Comprensión básica de codificación en JavaScript.
- Comprender las promesas en JavaScript.
Paso 1: Introducción a la sintaxis de la API Fetch
Una forma de utilizar la API Fetch es pasar la URL de la API fetch() como parámetro:
fetch(url)
El método fetch() devuelve una Promesa. Después del método fetch(), inserte el método Promise then():
fetch(url)
.then(function() {
// handle the response
})Si la Promesa devuelta se resuelve, se ejecuta la función dentro del método then(). Esta función contiene código para gestionar los datos recibidos de la API.
Después del método then(), inserte el método catch():
fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});La API que llamas con fetch() podría estar dañada o producirse algún otro error. En tal caso, se devuelve la promesa rechazada. El método catch se utiliza para gestionar el rechazo. Si se produce un error al llamar a tu API, se ejecutará el código dentro de catch().
Una vez que comprenda la sintaxis para usar la API Fetch, ahora puede pasar a usar fetch() en una API real.
Paso 2: Usar Fetch para obtener datos de una API
El siguiente ejemplo de código se basa en la API JSONPlaceholder. Con esta API, obtendrá diez usuarios y los mostrará en la página mediante JavaScript. Este tutorial recuperará los datos de la API JSONPlaceholder y los mostrará en los elementos de la lista de autores.
Comience creando un archivo HTML y agregando un título y una lista desordenada con identificaciones de autores:
<h1>Authors</h1>
<ul id="authors"></ul>Añade etiquetas de script al final de tu archivo HTML y usa un selector DOM para obtener el ul. Usa getElementById con los autores como argumento:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>Recuerde que los autores crearon el ul id anterior.
Luego crea una lista que sea un DocumentFragment:
<script>
// ...
const list = document.createDocumentFragment();
</script>Todos los elementos de lista adjuntos se añadirán a la lista. Un fragmento de documento no forma parte de la estructura de árbol del documento activo. Esto tiene la ventaja de que el redibujado no afecta al rendimiento cuando cambia el modelo de objetos del documento.
Cree una variable constante llamada url que contenga la URL de la API que devuelve diez usuarios aleatorios:
<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>Ahora, utilizando la API Fetch, llame a la API JSONPlaceholder usando fetch() con la URL como argumento:
<script>
// ...
fetch(url)
</script>Estás llamando a la API Fetch y pasando la URL a la API JSONPlaceholder. Se recibe la respuesta. Sin embargo, esta no es JSON, sino un objeto con un conjunto de métodos que se pueden usar según el uso que se quiera dar a la información. Usa el método json() para convertir el objeto devuelto a JSON.
Agregue un método then() que contenga una función con un parámetro llamado respuesta:
<script>
// ...
fetch(url)
.then((response) => {})
</script>El parámetro de respuesta toma el valor del objeto devuelto por fetch(url). Utilice el método json() para convertir la respuesta a datos JSON:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>Los datos JSON aún deben procesarse. Agregue otra instrucción `then()` con una función que acepte un argumento llamado `data`:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>En esta función, crea una variable llamada autor que se establece igual a los datos:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>Para cada autor en autores, se desea crear un elemento de lista que muestre su nombre. El método map() es adecuado para este patrón:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>En la función de mapa, crea una variable llamada li que sea igual a createElement con li (el elemento HTML) como argumento. Crea también un h2 para el nombre y un span para el correo electrónico:
<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 elemento h2 contendrá el nombre del autor. El elemento span contendrá su correo electrónico. El atributo innerHTML y la interpolación de cadenas permiten hacer esto:
<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>Luego, agregue estos elementos DOM con appendChild:
<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 añade a la lista DocumentFragment. Una vez completado el mapa, la lista se añade al elemento de lista desordenada ul.
Con ambas funciones then() completadas, puedes agregar la función catch(). Esta función registrará cualquier posible error en la consola:
<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:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
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 correctamente utilizando las API JSONPlaceholder y Fetch. A continuación, realizarás solicitudes POST.
Paso 3 – Manejo de solicitudes POST
La búsqueda se realiza de forma predeterminada con solicitudes GET, pero puedes usar cualquier otro tipo de solicitud, modificar encabezados y enviar datos. Vamos a crear una solicitud POST.
Primero, incluya una variable constante que contenga el enlace a la API JSONPlaceholder:
const url = 'https://jsonplaceholder.typicode.com/users';
A continuación, debes configurar tu objeto y pasarlo como segundo argumento a la función de búsqueda. Este será un objeto llamado data con la clave Sammy (o tu nombre) y el valor:
// ...
let data = {
name: 'Sammy'
}Dado que se trata de una solicitud POST, debe especificarla explícitamente. Cree un objeto llamado fetchData:
// ...
let fetchData = {
}Este objeto debe contener tres claves: método, cuerpo y encabezado:
// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}La clave del método tendrá el valor "POST". El cuerpo se establecerá en el formato JSON.stringify del objeto de datos recién creado. Los encabezados tendrán el valor "Content-Type": "application/json; charset=UTF-8".
La interfaz de encabezados es una característica de la API Fetch que le permite realizar acciones en los encabezados de solicitud y respuesta HTTP.
Al colocar este código, se puede realizar una solicitud POST mediante la API Fetch. Se agregan la URL, los datos de búsqueda y los argumentos a la solicitud POST de búsqueda:
// ...
fetch(url, fetchData)La función then() contiene código que maneja la respuesta recibida de la API JSONPlaceholder:
// ...
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});Este es el código completo de la solicitud que creaste:
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
});También puedes pasar fetch() a un objeto Request.
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, la solicitud se puede utilizar como el único argumento para fetch(), reemplazando url y fetchData.
Ahora conoce dos formas de crear y ejecutar solicitudes POST con la API Fetch.
Resultado
Si bien la API Fetch aún no es compatible con todos los navegadores, es una excelente alternativa a XMLHttpRequest.
