El método fetch() se usa para enviar las requests al servidor sin actualizar la página. Es una alternativa al objeto XMLHttpRequest . Tomará una API falsa que contendrá Array como ejemplo y desde esa API mostraremos PUT/Update data mediante el método de obtención de API creando una biblioteca HTTP personalizada. La API utilizada en este tutorial es: https://jsonplaceholder.typicode.com/users/2
Requisito previo: debe conocer los conceptos básicos de HTML CSS y JavaScript.
Explicación: En primer lugar, debemos crear el archivo index.html y pegar el siguiente código del archivo index.html en él. Este archivo index.html incluye el archivo library.js y app.js en la parte inferior de la etiqueta del cuerpo. Ahora, en el archivo library.js , en primer lugar, cree una clase ES6 EasyHTTP y dentro de esa clase hay una función async fetch() que coloca los datos en la URL de la API. Hay dos etapas de espera. Primero por fetch() y luego por su respuesta. Cualquiera que sea la respuesta que recibamos, la devolvemos a la función de llamada en el archivo app.js.
Ahora, en el archivo app.js , en primer lugar, cree una instancia de la clase EasyHTTP . Luego, al poner la función de prototipo, envíe la URL al archivo library.js . Además en esto hay dos promesas por resolver. El primero es para cualquier dato de respuesta y el segundo es para cualquier error.
Nombre de archivo: index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>PUT Request</title> </head> <body> <h1> Simple PUT request using fetch API by making custom HTTP library </h1> <!-- Including library.js and app.js --> <script src="library.js"></script> <script src="app.js"></script> </body> </html>
Nombre de archivo: biblioteca.html
// ES6 class
class EasyHTTP {
// Make an HTTP PUT Request
async put(url, data) {
// Awaiting fetch which contains method,
// headers and content-type and body
const response = await fetch(url, {
method: 'PUT',
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(data)
});
// Awaiting response.json()
const resData = await response.json();
// Return response data
return resData;
}
}
Nombre de archivo: app.html
// Instantiating new EasyHTTP class
const http = new EasyHTTP;
// User Data
const data = {
name: 'sunny yadav',
username: 'sunnyyadav',
email: 'sunny@gmail.com'
}
// Update Post
http.put(
'https://jsonplaceholder.typicode.com/users/2',
data)
// Resolving promise for response data
.then(data => console.log(data))
// Resolving promise for error
.catch(err => console.log(err));
Salida: Abra el archivo index.html en el navegador y luego haga clic con el botón derecho-> inspeccionar elemento->consola .
El siguiente resultado que verá para la solicitud PUT .
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA