El método fetch() se usa para enviar las requests al servidor sin actualizar la página. Es una alternativa al objeto XMLHttpRequest.
La sintaxis básica de una solicitud fetch() es la siguiente:
javascript
fetch(url, {options})
.then(data => {
// Do some stuff here
})
.catch(err => {
// Catch and display errors
})
La diferencia entre XMLHttpRequest y fetch es que fetch usa Promesas que son fáciles de administrar cuando se trata de múltiples operaciones asincrónicas donde las devoluciones de llamada pueden crear un infierno de devolución de llamada que conduce a un código inmanejable.
Sin embargo, todavía hay algunos navegadores que no son compatibles con el método fetch(), por lo que para ellos, tenemos que ceñirnos al objeto XMLHttpRequest.
Se puede usar un método fetch() con muchos tipos de requests, como POST , GET , PUT y DELETE .
Método GET usando la API de búsqueda:
En este ejemplo, vamos a usar JSONPlaceholder que proporciona la API REST para obtener y publicar datos aleatorios como publicaciones, usuarios, etc.
En primer lugar, cree un archivo HTML con el siguiente código:
html
<!DOCTYPE html> <html lang="en"> <head> <title>Fetch API</title> </head> <body> <div> <h1>Fetch API GET REQUEST</h1> <h3>Fetching Users</h3> <!-- Table to display fetched user data --> <table id="users"></table> </div> <!-- Link JavaScript file --> <script src="main.js"></script> </body> </html>
En JavaScript, el archivo contiene el siguiente código
javascript
// main.js
// GET request using fetch()
fetch("https://jsonplaceholder.typicode.com/users")
// Converting received data to JSON
.then(response => response.json())
.then(json => {
// Create a variable to store HTML
let li = `<tr><th>Name</th><th>Email</th></tr>`;
// Loop through each data and add a table row
json.forEach(user => {
li += `<tr>
<td>${user.name} </td>
<td>${user.email}</td>
</tr>`;
});
// Display result
document.getElementById("users").innerHTML = li;
});
Ahora, cuando abra el archivo HTML, verá el resultado de la siguiente manera:
Cuando abra DevTools en Chrome (presione F12), verá que se ha realizado una solicitud de recuperación a los usuarios de la ruta.
Puede obtener más datos de la solicitud, consulte la documentación .
Solicitud POST utilizando la API de búsqueda:
la solicitud de publicación se usa ampliamente para enviar formularios al servidor. Fetch también es compatible con la llamada al método POST. Para realizar una solicitud POST, debemos especificar parámetros adicionales con la solicitud, como método , encabezados , etc.
En este ejemplo, realizaremos una solicitud POST en el mismo JSONPlaceholder y agregaremos una publicación en las publicaciones. Luego devolverá el mismo contenido de la publicación con una identificación.
En el mismo archivo JavaScript agregue el siguiente contenido:
javascript
// main.js
// POST request using fetch()
fetch("https://jsonplaceholder.typicode.com/posts", {
// Adding method type
method: "POST",
// Adding body or contents to send
body: JSON.stringify({
title: "foo",
body: "bar",
userId: 1
}),
// Adding headers to the request
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
// Converting to JSON
.then(response => response.json())
// Displaying results to console
.then(json => console.log(json));
Ahora, si abre su consola de JavaScript y actualiza la página, verá un resultado como el siguiente:
La API devuelve un estado de 201 , que es un código de estado HTTP para Creado .
Publicación traducida automáticamente
Artículo escrito por frikishaan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA