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

Respuestas:

164

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.

c-chavez
fuente
Aquí hay más preguntas. Una vez que responseOk es verdadero, ¿necesitamos verificar el estado en response.data si tiene el estado proporcionado? gracias
Yang Wang
1
Axios request is ok when status is 200 and statusText is 'OK' ¿Qué pasa con otros httpStatus en el rango 2xx como 201 o 204?
leonbloy
46

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í: ingrese la descripción de la imagen aquí

Lucas Katayama
fuente
66
Todavía no puedo encontrar el beneficio de buscar sobre axios. ¿Puedes tener alguna idea de por qué debería ir con los axios?
Gorakh Nath
44
Creo que fetch es un estándar, consulte fetch.spec.whatwg.org ... axios podría tener más funciones porque no sigue eso ... Creo que al final hacen lo básico (solicitud http de ajax) pero depende en lo que necesitas ... No necesitaba un transformador ... así que obtener una lib estándar es un profesional ...
Lucas Katayama
44
Tenga en cuenta que esa tabla es engañosa. Se define fetchcomo Native (lo que significa que puede usarlo, no es necesario incluir una biblioteca , de acuerdo con el origen de la tabla), mientras que en realidad nofetch está implementado en algunas plataformas (especialmente en todas las versiones de IE), para lo cual debe proporcionar un Polyfill externo de todos modos.
Luca Fagioli
3
Agregar a la diferencia mencionada por @ jack123 fetch tampoco proporciona una funcionalidad básica de ajax como timeout(que es muy extraño) tenemos que usar un módulo separado para implementar esta funcionalidad básica.
Apurva jain
2
@LucasKatayama El enlace parece estar roto
vancy-pants
30

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

ingrese la descripción de la imagen aquí

Creo que deberías usar axios.

Thilina Sampath
fuente
44
Convenido. Axios también es una pequeña importación de materia, por lo que la hinchazón no es una gran preocupación, a diferencia de algo como express o mangosta, donde si uno está un poco loco por el tamaño del paquete, podrían estar preocupados. :)
CodeFinity
1
No revierta ediciones legítimas ni copie contenido sin atribución.
jonrsharpe
9

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)
Vaibhav Bacchav
fuente
66
¿Alguien puede verificar que esto sea realmente cierto? Es 1 persona, pero los 9 votos positivos parecen estar de acuerdo, sin embargo, sería bueno ver comentarios al respecto (estoy usando axios con el trabajador de servicio pwa fuera de línea, es por eso que pregunto.
Tom Stickel,
Claro, podemos tener algunos comentarios más sobre esto, pero estaba enfrentando problemas con el almacenamiento en caché mientras usaba axios y cuando reemplacé axios con las API fetch () se resolvió
Vaibhav Bacchav
1
Esto parece ser correcto, pero podría solucionarse en un futuro cercano: github.com/axios/axios/pull/2891
arkhz
7

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.

Daniel
fuente
1
Fetch está bien, pero Axios es como dijiste, más sencillo. Lo que está integrado en los navegadores modernos (fetch) no es tan bueno para los lanzamientos de funciones. - así que prefiero Axios
Tom Stickel
5

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.

cyberwombat
fuente
1
@baitun, estos son de mí ejecutando pruebas unitarias que (creo que estaba usando Mocha) a menudo tienen un .throwsmétodo para probar los errores arrojados. En este caso, estaba probando rechazos de al 3 libs y noté la diferencia en los datos que se devolvieron.
cyberwombat
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 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

Jairo Malanay
fuente