¿Cuál es la diferencia entre Axios y Fetch?

Llamo al servicio web usando fetch pero lo mismo que puedo hacer con la ayuda de axios. Entonces ahora estoy confundido. ¿Debo ir por axios o buscar?

Fetch y Axios son muy similares en funcionalidad, pero para una mayor compatibilidad con versiones anteriores, Axios parece funcionar mejor (por ejemplo, fetch no funciona en IE 11, consulte esta publicación )

Además, si trabaja con solicitudes JSON, las siguientes son algunas diferencias con las que me topé.

Obtener solicitud de publicación JSON

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Solicitud posterior a Axios JSON

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

Entonces:

• Fetch's body = datos de Axios
• El cuerpo de Fetch debe ser encadenado , los datos de Axios contienen el objeto
• Fetch no tiene url en el objeto de solicitud, Axios tiene url en el objeto de solicitud
• La función de solicitud de extracción incluye la url como parámetro , la función de solicitud de Axios no incluye la url como parámetro .
• La solicitud de recuperación está bien cuando el objeto de respuesta contiene la propiedad ok , la solicitud de Axios está bien cuando el estado es 200 y el texto de estado es 'OK'
• Para obtener la respuesta del objeto json: en fetch llame a la función json () en el objeto de respuesta, en Axios obtenga la propiedad de datos del objeto de respuesta.

Espero que esto ayude.

Son bibliotecas de solicitudes HTTP ...

Termino con la misma duda, pero la tabla en esta publicación me hace seguir isomorphic-fetch. Lo cual es fetchpero funciona con NodeJS.

http://andrewhfarmer.com/ajax-libraries/

El enlace de arriba está muerto. La misma tabla está aquí: https://www.javascriptstuff.com/ajax-libraries/

O aquí:

Según mzabriskie en GitHub :

En general son muy similares. Algunos beneficios de los axios:

• Transformadores: permiten realizar transformaciones en los datos antes de realizar una solicitud o después de recibir una respuesta

• Interceptores: le permiten modificar la solicitud o la respuesta por completo (encabezados también). también, realice operaciones asincrónicas antes de realizar una solicitud o antes de que Promise se liquide

• Protección XSRF incorporada

por favor verifique los ejes de soporte del navegador

Creo que deberías usar axios.

Una diferencia importante más entre la API de recuperación y la API de axios

• Mientras usa Service Worker, debe usar fetch API solo si desea interceptar la solicitud HTTP
• Ex. Mientras realiza el almacenamiento en caché en PWA utilizando el trabajador de servicio, no podrá almacenar en caché si está utilizando la API axios (funciona solo con la API de recuperación)

Axios es un paquete de terceros independiente que se puede instalar fácilmente en un proyecto React usando NPM.

La otra opción que mencionó es la función fetch. A diferencia de Axios, fetch()está integrado en la mayoría de los navegadores modernos. Con fetch no necesita instalar un paquete de terceros.

Depende de usted, puede ir fetch()y potencialmente arruinar si no sabe lo que está haciendo O simplemente use Axios, que es más sencillo en mi opinión.

Además ... estaba jugando con varias librerías en mi prueba y noté su diferente manejo de las solicitudes 4xx. En este caso, mi prueba devuelve un objeto json con una respuesta 400. Así es como 3 libs populares manejan la respuesta:

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

De interés es eso request-promise-nativey axioslanzar la respuesta 4xx mientras node-fetchno lo hace. También fetchutiliza una promesa para el análisis json.

Beneficios de los axios:

• Transformadores: permiten realizar transformaciones en los datos antes de realizar la solicitud o después de recibir la respuesta
• Interceptores: le permiten modificar la solicitud o la respuesta por completo (encabezados también). también realice operaciones asincrónicas antes de realizar la solicitud o antes de que Promise se liquide
• Protección XSRF incorporada

Ventajas de axiossobrefetch