Manejo de la respuesta XHR JSON en JavaScript vainilla

En un artículo anterior, escribí sobre cómo hacer una solicitud JSON usando XHR en JavaScript estándar.

JSON es un formato ampliamente utilizado para la respuesta de las API. Los datos JSON se almacenan como pares clave-valor similares a las propiedades de los objetos de JavaScript, separados por comas, llaves y corchetes.

Cuando realiza una solicitud JSON utilizando XHR, los datos de respuesta se pueden recuperar desde el responseText propiedad en el XMLHttpRequest objeto:

const xhr = new XMLHttpRequest();

// ...

xhr.onload = () => {
    const data = xhr.responseText;
};

Aquí está el código completo para la solicitud JSON:

const xhr = new XMLHttpRequest();

xhr.onload = () => {
    const data = xhr.responseText;

    // log response
    console.log(data);
};

// create and send the reqeust
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

El código anterior debería funcionar bien y registrar la respuesta en la consola. Sin embargo, hay un pequeño problema. xhr.responseText devuelve una cadena, aunque la respuesta devuelta por la API está en formato JSON.

Hay varias formas de resolver este problema. Mirémoslos.

Uso de la API de búsqueda

Fetch API es una alternativa moderna a XHR para enviar solicitudes HTTP asíncronas en JavaScript. También es compatible con promesas, lo cual es otra cosa buena para manejar solicitudes asincrónicas en JavaScript.

Así es como puede usar la API Fetch para recuperar una lista de publicaciones de JSONPlaceholder:

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

La API Fetch no es compatible con navegadores más antiguos. Por lo tanto, use esta solución solo si no necesita admitir navegadores antiguos como Internet Explorer.

Usando responseType Propiedad

Los navegadores modernos le permiten usar el responseType propiedad en el XMLHttpRequest objeto para establecer el formato de respuesta esperado. XHR analizará automáticamente el cuerpo de la respuesta según el formato especificado. Luego puede acceder a él a través del response propiedad como se muestra en el siguiente ejemplo:

const xhr = new XMLHttpRequest();

// specify response format
xhr.responseType = 'json';

xhr.onload = () => {
    const data = xhr.response;

    // log response
    console.log(data);
};

// create and send the reqeust
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

El responseType = 'json' no es compatible con IE 11 y versiones anteriores.

Usando JSON.parse() Método

Para admitir navegadores más antiguos, la mejor solución es usar el método JSON.parse() para convertir la cadena devuelta por responseText a un objeto JSON:

const xhr = new XMLHttpRequest();

xhr.onload = () => {
    const data = JSON.parse(xhr.responseText);

    // log response
    console.log(data);
};

// create and send the reqeust
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.send();

El código anterior debería funcionar en cualquier navegador que admita XMLHttpRequest y JSON .