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

axios vs fetch

Question

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?

Answer 1

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 que request-promise-native y axios arrojan una respuesta 4xx mientras que node-fetch no lo hace. También fetch usa una promesa para el análisis json.

Answer 2

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.

Entonces, depende de usted, puede ir con fetch() y potencialmente desordenar si no sabe lo que está haciendo O simplemente usar Axios, que en mi opinión es más sencillo.

Answer 3

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 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 axios sobre fetch

Answer 4

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
}

Asi que:

• 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 recuperació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.

Answer 5

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 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 revise los ejes de soporte del navegador

Creo que deberías usar axios.

Answer 6

Son bibliotecas de solicitudes HTTP ...

Termino con la misma duda, pero la tabla en esta post me hace ir con isomorphic-fetch . Lo cual es fetch pero funciona con NodeJS.

post

Answer 7

Una diferencia importante más entre API de recuperación y 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)