Peticiones AJAX con fetch API

por

En este artículo vamos a explicar cómo hacer peticiones AJAX utilizando la fetch API junto con async/await en JavaScript. Existen varias formas de realizar peticiones HTTP mediante AJAX, pero las principales suelen ser XMLHttpRequest y fetch, las cuales son nativas de JavaScript, además de liberías externas como Axios, jQuery o SuperAgent. Este artículo forma parte de la serie introducción a AJAX. Una serie de artículos donde se explican todas las funcionalidades y utilidades de usar AJAX, mejorando la experiencia del usuario y optimizando el desarrollo de aplicaciones web.

Peticiones fetch con async/await

Realizar peticiones AJAX con fetch API y async/await es una forma más moderna de hacer solicitudes HTTP en JavaScript. Ofrece una manera más sencilla y potente de hacer peticiones comparado con XMLHttpRequest. Junto con async/await, proporciona una sintaxis más clara y manejable para trabajar con operaciones asíncronas.

  • fetch: Permite realizar peticiones HTTP con AJAX y fetch API de manera sencilla y devuelve una promesa.
  • async/await: Facilita el manejo de promesas, permitiendo escribir código asíncrono que se asemeja a código síncrono.
  • try/catch: Estos bloques se utilizan para manejar los resultados o los errores que podrían ocurrir durante la ejecución de código.

El código general para realizar peticiones AJAX con la fetch API sería el siguiente:

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const data = await response.json();
        console.log('Data received:', data);
    } catch (error) {
        if (error.name === 'SyntaxError') {
            // Manejar errores de conversión
            console.error('Error parsing JSON:', error.message);
        } else {
            // Manejar otros errores
            console.error('Fetch error:', error.message);
        }
    }
}
fetchData();

Estas pocas lineas se encargan de realizar todo el proceso y nos mostrarán en consola el documento solicitado o un mensaje de error si algo falla. Podemos dividir el código en varias partes:

Configurar AJAX con fetch API

El primer paso para realizar peticiones AJAX con fetch API es definir una función asíncrona que realice la solicitud y obtener los datos de un servidor.

  • async function fetchData() { ... } Define una función asíncrona llamada fetchData.

Manejo de errores con try, catch

En JavaScript, el bloque try...catch se utiliza para manejar excepciones. Esto es crucial para capturar y manejar errores que podrían ocurrir durante la ejecución de código, especialmente en operaciones asíncronas como las peticiones AJAX con fetch API y async/await.

  • try { ... } El código dentro del bloque try intenta realizar una solicitud a una API usando fetch y luego intenta convertir la respuesta a JSON. Si cualquiera de estas operaciones falla (por ejemplo, si la solicitud no es exitosa o si la conversión a JSON falla), se lanzará una excepción.
    • const response = await fetch('https://api.example.com/data'); Usa fetch para realizar una solicitud GET a la URL especificada y espera a que la promesa se resuelva.
    • if (!response.ok) { ... } Verifica si la respuesta no es exitosa (cualquier estado HTTP fuera del rango 200-299).
      • throw new Error(HTTP error! Status: ${response.status}); Lanza un error con el estado HTTP si la respuesta no es exitosa.
    • const data = await response.json(); Intenta convertir la respuesta a formato JSON y espera a que la conversión se complete.
    • console.log('Data received:', data); Imprime los datos recibidos en la consola.
  • catch (error) { ... } Si se lanza una excepción en el bloque try, el control pasa al bloque catch. El bloque catch recibe cualquier error que ocurra durante la solicitud o el procesamiento de la respuesta. El objeto error contiene información sobre lo que salió mal. Esto incluye errores de red y errores al procesar la respuesta.
    • if (error.name === 'SyntaxError') { ... } Verifica si el error es un SyntaxError, lo que indica un problema al convertir la respuesta a JSON.
      • console.error('Error parsing JSON:', error.message); Imprime un mensaje de error específico para problemas de conversión JSON.
    • else { ... } Maneja otros tipos de errores.
      • console.error('Fetch error:', error.message); Imprime un mensaje de error genérico para otros problemas relacionados con fetch.

Tipos de datos AJAX con fetch API

Igual que al trabajar con XMLHttpRequest, las peticiones AJAX con fetch permite trabajar con varios formatos de datos en las respuestas. Al realizar peticiones AJAX con fetch API podemos solicitar un formato determinado especificando el tipo de respuesta deseada:

  • response.json(): Convierte la respuesta a formato JSON, comúnmente utilizado para el intercambio de datos entre cliente y servidor debido a su legibilidad y facilidad de uso.
  • response.text(): Convierte la respuesta a una cadena de texto (string). Útil para respuestas que contienen datos en formato de texto plano, como archivos HTML o CSV.
  • response.blob(): Convierte la respuesta a un objeto Blob, que representa datos binarios inmóviles. Útiles para trabajar con datos binarios grandes, como imágenes, vídeos o archivos.
  • response.arrayBuffer(): Convierte la respuesta a un ArrayBuffer, que es una representación de datos binarios en memoria. Útil en aplicaciones que requieren manipulación directa de bytes.
  • response.formData(): Convierte la respuesta a un objeto FormData. Especialmente útil cuando se trabaja con formularios HTML, permitiendo acceder a los datos enviados en un formato clave-valor.

Peticiones AJAX con fetch API

En este artículo hemos cubierto la manera de hacer peticiones AJAX con fetch API, así como configurar, enviar y manejar respuestas y errores en solicitudes HTTP utilizando async/await. Con un ejemplo práctico y completo hemos visto que la fetch API es flexible y potente, permitiendo trabajar con una variedad de formatos de datos en las respuestas. Conocer cómo manejar los diferentes formatos permite adaptarte a una amplia gama de escenarios en el desarrollo web, asegurando que puedas procesar adecuadamente cualquier tipo de dato que el servidor pueda devolver.

Realizar peticiones AJAX con fetch API junto con async/await es una manera moderna y eficiente de realizar solicitudes HTTP en JavaScript. Este enfoque no solo simplifica el código, sino que también mejora la legibilidad y el manejo de errores.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario