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

Fetch y Axios son muy similares en funcionalidad, pero para más compatibilidad con versiones anteriores Axios parece funcionar mejor (fetch no funciona en IE 11, por ejemplo, verifique este post)

Además, si trabajas con peticiones JSON, estas son algunas diferencias con las que me topé.

Obtener la 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
}

Axios JSON post request

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
}

Así que:

• Fetch's body = Axios' data
• Recuperar la el cuerpo tiene que ser stringified , 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 Fetch request incluye la url como parámetro, la función Axios request no incluye la url como parámetro.
• Fetch request es ok cuando el objeto response contiene la propiedad ok , Axios request es ok cuando status es 200 y statusText es'OK'
• Para obtener la respuesta del objeto json: en fetch llame a la función json () en el objeto response, en Axios obtenga la propiedad de datos del objeto response.

Espero que esto ayude.

Tenía curiosidad acerca de esto también, encontró su pregunta aquí, luego encontró este post Medio que puede resultar útil. Fetch parece un poco más detallado e implacable: https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte

En general son muy similares. Algunos beneficios de axios:

• Transformadores: permiten realizar transformaciones en los datos antes de que se realice la solicitud o después de que se reciba la respuesta
• Interceptores: le permiten alterar completamente la solicitud o respuesta (también los encabezados). también realice operaciones asincrónicas antes de que se realice la solicitud o antes de que se establezca la promesa
• Protección integrada XSRF

Creo que deberías usar axios.

Además... Estaba jugando con varias libs en mi prueba y noté su diferente manejo de 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 lanzan una respuesta 4xx mientras que node-fetch no lo hace. También fetch usa una promesa para el análisis json.

Beneficios de axios:

• Transformadores: permiten realizar transformaciones en los datos antes de que se realice la solicitud o después de que se reciba la respuesta
• Interceptores: le permiten alterar completamente la solicitud o respuesta (también los encabezados). también realice operaciones asincrónicas antes de que se realice la solicitud o antes de que se establezca la promesa
• Protección XSRF incorporada

Ventajas de axios sobre fetch