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 *