В чем разница между Axios и Fetch?

Я вызываю веб-сервис с помощью fetch, но то же самое я могу сделать с помощью axios. Так что теперь я в замешательстве. Должен ли я пойти на аксиос или получить?

Fetch и Axios очень похожи по функциональности, но для большей обратной совместимости Axios, кажется, работает лучше (fetch не работает в IE 11, например, проверьте этот пост )

Кроме того, если вы работаете с JSON-запросами, ниже приведены некоторые различия, с которыми я столкнулся.

Получить запрос 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

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
}

Так:

• Тело Фетча = данные Аксиоса
• Тело Fetch должно быть строковым , данные Axios содержат объект
• Fetch не имеет URL-адреса в объекте запроса, Axios имеет URL-адрес в объекте запроса
• Функция запроса выборки включает URL-адрес в качестве параметра , функция запроса Axios не включает URL-адрес в качестве параметра .
• Запрос на выборку в порядке, когда объект ответа содержит свойство ok , запрос Axios в порядке, когда status имеет значение 200 и statusText имеет значение «OK»
• Чтобы получить ответ объекта json: в fetch вызовите функцию json () для объекта ответа, в Axios получите свойство data объекта ответа.

Надеюсь это поможет.

Это библиотеки HTTP-запросов ...

Я в конечном итоге с тем же сомнением, но таблица в этом посте заставляет меня идти с isomorphic-fetch. Что, fetchно работает с NodeJS.

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

Ссылка выше не работает. Та же таблица находится здесь: https://www.javascriptstuff.com/ajax-libraries/

Или здесь:

По словам мзабриски на GitHub :

В целом они очень похожи. Некоторые преимущества Axios:

• Трансформаторы: позволяют выполнять преобразования данных перед выполнением запроса или после получения ответа.

• Перехватчики: позволяют полностью изменить запрос или ответ (в том числе и заголовки). также выполнять асинхронные операции до того, как будет сделан запрос или до того, как Promise выполнит

• Встроенная защита XSRF

пожалуйста, проверьте поддержку браузера Axios

Я думаю, что вы должны использовать Axios.

Еще одно существенное отличие между API выборки и API Axios

• При использовании сервисного работника вы должны использовать API выборки, только если вы хотите перехватить HTTP-запрос
• Ex. При выполнении кэширования в PWA с использованием сервисного работника вы не сможете кэшировать, если используете Axios API (он работает только с API выборки)

Axios - это автономный сторонний пакет, который можно легко установить в проект React с помощью NPM.

Другой вариант, который вы упомянули, это функция выборки. В отличие от Axios, fetch()встроен в большинство современных браузеров. С fetch вам не нужно устанавливать сторонний пакет.

Так что решать вам, вы можете пойти fetch()и, возможно, испортить ситуацию, если не знаете, что делаете, или просто использовать Axios, что, на мой взгляд, более просто.

Кроме того ... Я играл с разными библиотеками в моем тесте и заметил, что они по-разному обрабатывают запросы 4xx. В этом случае мой тест возвращает объект json с ответом 400. Вот как 3 популярные библиотеки обрабатывают ответ:

// 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)

Интересно, что request-promise-nativeи axiosбросить на 4xx ответа пока node-fetchнет. Также fetchиспользует обещание для разбора JSON.

Преимущества Axios:

• Трансформаторы: позволяют выполнять преобразования данных перед выполнением запроса или после получения ответа.
• Перехватчики: позволяют полностью изменить запрос или ответ (в том числе и заголовки). также выполнять асинхронные операции перед выполнением запроса или до завершения Promise
• Встроенная защита XSRF

Преимущества axiosболееfetch