Usar fetch para enviar solicitudes HTTP en JavaScript

    Introducción

    La API Fetch de JavaScript nos permite enviar solicitudes HTTP. Ha sido una parte estándar de JavaScript desde ECMAScript 2015 (comúnmente conocido como ES6) se introdujo y usa Promesas.

    Este artículo le mostrará primero cómo se realizaron las solicitudes con JavaScript vanilla antes de que se desarrollara la API Fetch. Luego, lo guiaremos sobre cómo usar la API de Fetch, destacando la mejora en comparación con otros métodos.

    Preparar

    Este artículo analiza el uso de la API Fetch para realizar solicitudes HTTP en el navegador. Como tal, necesitamos configurar una página HTML que nuestro navegador pueda mostrar. En su espacio de trabajo, comience por crear un index.html archivo.

    los index.html El archivo se utilizará en todo el artículo. La página HTML no tiene contenido textual, solo se utilizará para cargar los archivos JS para que podamos ver las solicitudes y respuestas en la consola de nuestro navegador:

    <!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>JavaScript HTTP Requests</title>
    </head>
    
    <body>
        <script src="./xhr.js"></script>
    </body>
    
    </html>
    

    Cambiaremos el script etiqueta cuando estamos aprendiendo nuevos temas, pero el resto del HTML permanecerá igual.

    También desea tener la consola de su navegador abierta para que podamos ver los resultados de nuestras solicitudes HTTP. Esto generalmente se hace haciendo clic derecho en la página web y seleccionando “Inspeccionar”. En Chrome se ve así:

    Ahora, seleccionemos la pestaña “Consola” para que podamos ver cualquier salida que registre nuestro JavaScript:

    ¡Estás listo! Comencemos a enviar solicitudes HTTP con el primer método posible con JavaScript: XMLHttpRequest.

    Solicitudes con XMLHttpRequest

    Antes de que existiera la API Fetch, todas las solicitudes de JavaScript se realizaban con un XMLHttpRequest (o XHR) objeto. A pesar de su nombre, este objeto puede recuperar datos en cualquier formato de un servidor. No se limita solo a XML.

    Pongamos manos a la obra con una solicitud XHR en nuestro navegador. En la misma carpeta que su index.html archivo, cree un nuevo xhr.js archivo.

    Este nuevo archivo JavaScript creará un objeto XHR y enviará un GET solicitud a una API JSON. Luego, registraremos los resultados de la solicitud en la consola. En tus xhr.js archivo, ingrese lo siguiente:

    let xhr = new XMLHttpRequest();
    xhr.open('get', 'https://jsonplaceholder.typicode.com/posts/1');
    xhr.send();
    
    xhr.onload = function() {
        console.log(xhr.response);
    };
    

    En la primera línea, creamos un nuevo XMLHttpRequest objeto. Luego usamos el open() método para crear una nueva solicitud HTTP. El primer argumento de open() es el método HTTP de la solicitud; en este caso, estamos enviando un GET solicitud. El segundo argumento es la URL con el recurso del servidor que queremos. Luego usamos el send() método para enviar la solicitud.

    Cuando un XHR obtiene datos de la red con éxito, envía un evento de carga. Para procesar los datos después de que se cargan, establecemos una función en el onload propiedad de la XHR objeto. En este caso, simplemente registramos la respuesta en la consola.

    Ahora, en su consola de desarrollador debería ver lo siguiente.

    Buen trabajo al realizar una solicitud de API con XMLHttpRequest!

    Si bien es útil, la forma en que maneja los datos asincrónicos es muy diferente de las promesas organizadas y estandarizadas que se usan en JavaScript moderno. Podemos mantener un código más sencillo con la API Fetch.

    La API de Fetch

    Fetch API es una API basada en promesas para realizar solicitudes HTTP, similar a lo que hicimos usando XMLHttpRequest. diferente a XMLHttpRequest no tenemos que crear nuevos objetos cuando usamos la API Fetch. Los navegadores vienen con un fetch() función que podemos utilizar para realizar solicitudes.

    Veamos cómo podemos usar esta API para realizar solicitudes HTTP a través de Internet.

    Envío de solicitudes con Fetch

    La API de Fetch puede hacer GET, POST, PUT, PATCH, DELETE y otros tipos de solicitudes HTTP. Nos centraremos en dos de los métodos más comunes utilizados en las solicitudes HTTP: GET y POST.

    OBTENER Solicitudes

    Usemos la API Fetch para hacer una GET solicitud de https://jsonplaceholder.typicode.com/posts/1 como hicimos con XMLHttpRequest más temprano.

    En tus index.html archivo, cambie el script etiqueta para hacer referencia a un nuevo archivo JavaScript:

    <script src="./fetchGet.js"></script>
    

    Ahora crea el nuevo fetchGet.js archivo en el mismo espacio de trabajo. Enviaremos un GET solicitar y registrar la salida en la consola una vez más. Ingrese el siguiente código en fetchGet.js:

    fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(json => console.log(json));
    

    En la primera línea usamos el global fetch() función para enviar un GET solicitud a nuestra API. El argumento de fetch() es la URL con el recurso del lado del servidor.

    Luego encadenamos la promesa con el then() método, que captura la respuesta HTTP en el response argumento y llamar a su json() método. los json() El método analiza el cuerpo de la respuesta a un objeto JSON. Sin embargo, devuelve eso como una promesa.

    Por eso usamos then() una vez más para encadenar otra promesa, que registra el JSON analizado en la consola.

    Recargue el index.html si es necesario para que pueda ver el siguiente resultado:

    Nota: La salida se vería diferente a la que obtuvimos cuando hicimos el GET solicitud con XMLHttpRequest. Eso es porque XMLHttpRequest devuelve los datos de respuesta HTTP como una cadena, mientras que analizamos los datos en un objeto JSON. Si bien los formatos devueltos son diferentes, sus contenidos son los mismos.

    Veamos cómo podemos usar fetch() para enviar datos en un POST solicitud.

    Solicitudes POST

    Podemos subir datos con fetch() agregando un objeto JavaScript como segundo argumento con la información requerida para enviar la solicitud HTTP.

    Usemos fetch() para cargar datos JSON en POST solicitud a una API simulada. En tus index.html archivo, cambie el script etiqueta para hacer referencia a un nuevo archivo JavaScript:

    <script src="./fetchPost.js"></script>
    

    Ahora crea fetchPost.js en su espacio de trabajo para que podamos hacer una POST solicitud a la API que cargará una nueva tarea pendiente como un objeto JSON. Escriba el código a continuación en fetchPost.js:

    const todo = {
        title: 'Some really important work to finish'
    };
    
    fetch('https://jsonplaceholder.typicode.com/todos', {
            method: 'POST',
            body: JSON.stringify(todo),
            headers: {
                'Content-type': 'application/json; charset=UTF-8'
            }
        })
        .then(response => response.json())
        .then(json => {
            console.log(json);
        });
    

    Lo primero que hacemos es crear un todo objeto, que contiene los datos que nos gustaría enviar a la API.

    Al igual que con GET solicitudes, usamos fetch() proporcionando una URL de la API a la que queremos llegar. Sin embargo, esta vez tenemos un objeto como segundo argumento para fetch() con las siguientes propiedades:

    • method: Una cadena que especifica con el método HTTP para usar en la solicitud
    • body: Una cadena con cualquier dato que queramos darle al servidor en nuestra solicitud
    • headers: Un objeto que nos permite agregar los encabezados que queremos que incluyan nuestras solicitudes HTTP

    Como con el GET solicitud, procesamos la respuesta del servidor como JSON y la registramos en la consola del desarrollador. Recargando nuestro index.html debería mostrarnos la siguiente salida de la consola:

    Buen trabajo usando fetch() para cargar datos a través de POST ¡solicitud!

    Ahora que tenemos un control para realizar varias solicitudes HTTP con la API Fetch, veamos cómo podemos manejar diferentes respuestas HTTP.

    Procesamiento de respuestas con Fetch

    Hasta ahora, hemos estado analizando los datos de respuesta a JSON. Si bien esto funciona con la API utilizada en el ejemplo, otra respuesta puede devolver diferentes tipos de datos que no son JSON.

    Un objeto de respuesta HTTP que se devuelve después de una exitosa fetch() las solicitudes se pueden analizar en varios formatos. Además de json() método, podemos utilizar lo siguiente:

    • text(): Devuelve la respuesta como datos de cadena
    • blob(): Devuelve la respuesta como objeto blob (datos binarios junto con su codificación)
    • formData(): Devuelve la respuesta como FormData objeto (que almacena pares clave-valor de datos de cadena)
    • arrayBuffer(): Devuelve la respuesta como ArrayBuffer (representación de bajo nivel de datos binarios)

    Como el json() método, estas funciones devuelven una promesa con el contenido. Por lo tanto, todos deben estar encadenados con un then() función para que se pueda procesar el contenido.

    Estas funciones se utilizan para procesar respuestas HTTP correctas que devuelven datos. Veamos ahora cómo podemos manejar los errores con la API Fetch.

    Manejo de errores HTTP

    Como con cualquier otra promesa, fetch() los errores se manejan en el catch() método que se coloca al final de una cadena de promesa. sin embargo, el catch() La función solo se usa si fetch() no se pudo enviar una solicitud. Por lo general, esto significa que hubo un error de red.

    Si intentamos acceder a una URL que no existe y el servidor devuelve un 404, no quedaría atrapado en el catch() método, ya que 404 es un estado de respuesta HTTP válido.

    Por lo tanto, cuando manejamos errores con la API Fetch, debemos hacer dos cosas:

    • Incluir la catch() cláusula al final de la cadena de promesa para detectar cualquier error de red
    • Verifique el código de estado HTTP de la respuesta para ver si fue exitosa o no.

    Hagamos otro ejemplo en el que intentamos obtener una URL que no existe.

    Usando nuestro GET ejemplo de solicitud, podemos usar catch() Me gusta esto:

    fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(json => console.log(json))
        .catch(err => console.error(err));
    

    sin embargo, el catch() La función sólo se utiliza si la fetch() no se pudo enviar la solicitud. En tus index.html , cambie la etiqueta de secuencia de comandos para hacer referencia a un nuevo archivo JavaScript:

    <script src="./fetchError.js"></script>
    

    Ahora en tu espacio de trabajo crea un nuevo fetchError.js archivo. Ingrese el siguiente código:

    fetch("https://jsonplaceholder.typicode.com/notreal/")
        .then(response => {
            if (!response.ok) {
                throw new Error("Could not reach website.");
            }
            return response.json();
        })
        .then(json => console.log(json))
        .catch(err => console.error(err));
    

    Empezamos enviando un GET solicitud a una URL inexistente en esa API. Note el cambio en la primera then() función que analiza el cuerpo de la respuesta a JSON:

    if (!response.ok) {
        throw new Error("Could not reach website.");
    }
    

    Comprobamos el ok propiedad, que es booleana. Es true si el código de estado HTTP de la respuesta está entre 200-299. Al usar el operador not (!), podemos capturar los casos en los que el servidor devolvió un error HTTP. Si obtenemos un error HTTP, lanzamos un error personalizado que terminaría el fetch() cadena de promesas.

    Si no recibimos un error HTTP, devolvemos la respuesta JSON como una promesa, como antes.

    Al final de la cadena de promesas, tenemos un catch() función, que simplemente registra el error en la consola.

    Si recargas tu index.html página, debería ver este resultado de la consola:

    Bien hecho, cubriste los fundamentos de la API Fetch.

    Conclusión

    La API Fetch proporciona una forma basada en promesas de enviar solicitudes HTTP en JavaScript. Debido a que está basado en promesas, los desarrolladores lo ven como un reemplazo más limpio para XMLHttpRequest.

    Con el fetch() función, podemos hacer GET y POST solicitudes a diferentes URL. Podemos configurar un fetch() solicita usar cualquier método HTTP que queramos usar.

    los fetch() La función también proporciona una response objeto que se puede analizar en varios formatos. Estos incluyen JSON, texto y bytes, por nombrar algunos.

    También vimos cómo podemos manejar errores al realizar solicitudes con fetch(). Aparte de poner el catch() al final de la cadena de promesa para detectar errores de red, también debemos verificar el código de estado de la respuesta HTTP que recibimos antes de analizar sus datos.

    La API Fetch hace que las llamadas API externas sean manejables sin el uso de bibliotecas externas. ¿Con qué API planeas acceder? fetch()?

    Etiquetas:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *