Hubo un tiempo en el que se utilizaba XMLHttpRequest
para realizar solicitudes de API. No incluía promesas y no permitía un código JavaScript limpio. Al usar jQuery, se utilizó la sintaxis más limpia con jQuery.ajax()
.
Ahora, JavaScript tiene su propia forma integrada de hacer solicitudes de API. Esta es la API Fetch, un nuevo estándar para realizar solicitudes de servidor con promesas, pero incluye muchas otras funciones.
En este tutorial, creará solicitudes GET y POST usando la API Fetch.
Para completar este tutorial, necesitará lo siguiente:
Para usar la API Fetch, invoque el método fetch
, que acepta la URL de la API como parámetro:
fetch(url)
Después del método fetch()
, incluya el método de promesa then()
:
.then(function() {
})
Con el método fetch()
se obtiene una promesa. Si la promesa devuelta es resolve
, se ejecuta la función dentro del método then()
. Esa función contiene el código para gestionar los datos recibidos de la API.
Debajo del método then()
, incluya el método catch()
:
.catch(function() {
});
La API que invocó mediante fetch()
puede estar inactiva o pueden producirse otros errores. Si esto sucede, se mostrará la promesa de reject
. El método catch
se usa para gestionar reject
. El código dentro de catch()
se ejecutará si se produce un error al invocar la API de su elección.
Para resumir, usar la API Fetch se verá así:
fetch(url)
.then(function() {
})
.catch(function() {
});
Con un conocimiento sobre la sintaxis para usar la API Fetch, ahora puede continuar usando fetch()
en una API verdadera.
Las siguientes muestras de código se basarán en la API de Random User. Al usar la API, obtendrá diez usuarios y se mostrarán en la página usando Vanilla JavaScript.
La idea es obtener todos los datos de la API de Random User y mostrarlos en los elementos de la lista dentro de la lista del autor. Primero cree un archivo HTML y añada un encabezado y una lista desordenada con la id
de authors:
<h1>Authors</h1>
<ul id="authors"></ul>
Ahora, añada las etiquetas script
a la parte inferior de su archivo HTML y utilice un selector DOM para capturar la ul
. Use getElementById
con authors
como argumento. Recuerde que authors
es el id
para la ul
creada anteriormente:
<script>
const ul = document.getElementById('authors');
</script>
Cree una variable constante llamada url
que albergará la URL de la API que mostrará diez usuarios al azar:
const url = 'https://randomuser.me/api/?results=10';
Habiendo ya establecido ul
y url
, es momento de crear las funciones que se utilizarán para crear los elementos de la lista. Cree una función llamada createNode
que tome un parámetro llamado element
:
function createNode(element) {
}
Más tarde, cuando se invoque createNode
, deberá pasar el nombre de un elemento HTML real para crear.
Dentro de la función, añada la instrucción return
que devuelve el elemento
usando document.createElement()
:
function createNode(element) {
return document.createElement(element);
}
También necesitará crear una función llamada append
que tome dos parámetros: parent
y el
:
function append(parent, el) {
}
Esta función añadirá el
a parent
usando document.createElement
:
function append(parent, el) {
return parent.appendChild(el);
}
Tanto CreateNode
como append
están listos para funcionar. Ahora usando la API Fetch, invoque la API de Random User usando fetch()
con url
como argumento:
fetch(url)
fetch(url)
.then(function(data) {
})
})
.catch(function(error) {
});
En el código anterior, está invocando la API Fetch y pasando la URL a la API de Random User. Luego, se recibe una respuesta. Sin embargo, la respuesta que se obtiene no es JSON, sino un objeto con una serie de métodos que pueden usarse dependiendo de lo que se quiera hacer con la información. Para convertir el objeto devuelto en JSON, utilice el método json()
.
Añada el método then()
que contendrá una función con un parámetro llamado resp
:
fetch(url)
.then((resp) => )
El parámetro resp
toma el valor del objeto devuelto de fetch(url)
. Utilice el método json()
para convertir resp
en datos JSON:
fetch(url)
.then((resp) => resp.json())
Aún se deben procesar los datos JSON. Añada otra instrucción then()
con una función que tiene un argumento llamado data
:
.then(function(data) {
})
})
Dentro de esta función, cree una variable llamada authors
que se establece igual a data.results
:
.then(function(data) {
let authors = data.results;
Para cada autor en authors
, le convendrá crear un elemento de lista que muestre una imagen de ellos y muestre su nombre. El método map()
funciona muy bien para esto:
let authors = data.results;
return authors.map(function(author) {
})
Con su función de map
, cree una variable llamada li
que se establecerá igual a createNode
con li
(el elemento HTML) como argumento:
return authors.map(function(author) {
let li = createNode('li');
})
Repita esto para crear un elemento span
y un elemento img
:
let li = createNode('li');
let img = createNode('img');
let span = createNode('span');
La API ofrece un nombre para el autor y una imagen que acompaña al nombre. Establezca img.src
en la imagen del autor:
let img = createNode('img');
let span = createNode('span');
img.src = author.picture.medium;
El elemento span
debe contener el primer nombre y el apellido del author
. La propiedad innerHTML
y la interpolación de cadenas le permitirán hacer esto:
img.src = author.picture.medium;
span.innerHTML = `${author.name.first} ${author.name.last}`;
Con la imagen y el elemento de lista ya creados junto con el elemento span
, puede usar la función append
que se creó anteriormente para mostrar estos elementos en la página:
append(li, img);
append(li, span);
append(ul, li);
Una vez que se completan ambas funciones then()
, puede añadir la función catch()
. Esta función registrará el posible error en la consola:
.catch(function(error) {
console.log(error);
});
Este es el código completo de la solicitud que creó:
function createNode(element) {
return document.createElement(element);
}
function append(parent, el) {
return parent.appendChild(el);
}
const ul = document.getElementById('authors');
const url = 'https://randomuser.me/api/?results=10';
fetch(url)
.then((resp) => resp.json())
.then(function(data) {
let authors = data.results;
return authors.map(function(author) {
let li = createNode('li');
let img = createNode('img');
let span = createNode('span');
img.src = author.picture.medium;
span.innerHTML = `${author.name.first} ${author.name.last}`;
append(li, img);
append(li, span);
append(ul, li);
})
})
.catch(function(error) {
console.log(error);
});
Acaba de realizar con éxito una solicitud GET usando la API de Random User y la API Fetch. En el siguiente paso, aprenderá a hacer solicitudes POST.
Fetch se ajusta de manera determinada a las solicitudes GET, pero puede usar todos los demás tipos de solicitudes, cambiar los encabezados y enviar datos. Para ello, debe establecer su objeto y pasarlo como el segundo argumento de la función fetch.
Antes de crear una solicitud POST, cree los datos que desea enviar a la API. Este será un objeto llamado data
con la clave name
y el valor Sammy
(o su nombre):
const url = 'https://randomuser.me/api';
let data = {
name: 'Sammy'
}
Asegúrese de incluir una variable constante que contenga el enlace de la API de Random User.
Dado que se trata de una solicitud POST, deberá indicarlo de forma explícita. Cree un objeto llamado fetchData
:
let fetchData = {
}
Este objeto debe incluir tres claves: method
, body
y headers
. La clave method
debe tener el valor 'POST'
. body
debe establecerse igual al objeto data
que acaba de crear. headers
debe tener el valor de new Headers()
:
let fetchData = {
method: 'POST',
body: data,
headers: new Headers()
}
La interfaz Headers
es una propiedad de la API Fetch, que le permite realizar varias acciones en los encabezados de las solicitudes y respuestas HTTP. Si desea obtener más información sobre esto, este artículo llamado Cómo definir rutas y métodos de solicitud HTTP en Express puede proporcionarle más información.
Una vez establecido este código, se puede realizar la solicitud POST usando la API Fetch. Incluirá url
y fetchData
como argumentos para su solicitud POST fetch
:
fetch(url, fetchData)
La función then()
incluirá el código que maneja la respuesta recibida del servidor de API de Random User:
fetch(url, fetchData)
.then(function() {
// Handle response you get from the server
});
Para crear un objeto y usar la función fetch()
, también hay otra opción. En vez de crear un objeto como fetchData
, puede usar el constructor de solicitudes para crear su objeto de solicitud. Para ello, cree una variable llamada request
:
const url = 'https://randomuser.me/api';
let data = {
name: 'Sara'
}
var request =
La variable request
debe establecerse igual a new Request
. La construcción new Request
incluye dos argumentos: la url de la API (url
) y un objeto. El objeto también debe incluir las claves method
, body
y headers
, así como fetchData
:
var request = new Request(url, {
method: 'POST',
body: data,
headers: new Headers()
});
Ahora, request
puede usarse como el único argumento para fetch()
, ya que también incluye la URL de API:
fetch(request)
.then(function() {
// Handle response we get from the API
})
En su totalidad, su código se verá así:
const url = 'https://randomuser.me/api';
let data = {
name: 'Sara'
}
var request = new Request(url, {
method: 'POST',
body: data,
headers: new Headers()
});
fetch(request)
.then(function() {
// Handle response we get from the API
})
Ahora conoce dos métodos para crear y ejecutar solicitudes POST con la API Fetch.
Aunque la API Fetch aún no es compatible con todos los navegadores, es una excelente alternativa a XMLHttpRequest. Si desea aprender a invocar las API web usando React, consulte este artículo sobre ese mismo tema.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!