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

183

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

Горак Натх
источник
4
Я думаю , что это было обсуждено в деталях над github.com/mzabriskie/axios/issues/314
Jaydeep Solanki

Ответы:

165

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 объекта ответа.

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

с-Чавез
источник
Вот еще вопрос. Если responseOk имеет значение true, нужно ли проверять состояние в response.data, если оно имеет предоставленный статус? спасибо
Ян Ван
1
Axios request is ok when status is 200 and statusText is 'OK' А как насчет других httpStatus в диапазоне 2xx, например, 201 или 204?
leonbloy
46

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

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

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


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

Или здесь: введите описание изображения здесь

Лукас Катаяма
источник
6
Тем не менее, я не могу найти преимущества fetch по сравнению с axios. Можете ли вы представить, почему я должен идти с аксио?
Горакх Натх
4
Я думаю, что fetch - это стандартное приложение, см. Fetch.spec.whatwg.org ... axios может иметь больше возможностей, потому что этого не происходит .... Я думаю, что в конце они делают основы (запрос ajax http), но это зависит на то, что тебе нужно ... мне не нужен трансформатор ... так что получение стандартной библиотеки - это про ...
Лукас Катаяма
4
Имейте в виду, что эта таблица вводит в заблуждение. Он определяет fetchкак Native (имеется в виду, что вы можете просто использовать его - нет необходимости включать библиотеку , соответственно источнику таблицы), хотя на самом деле fetchон не реализован на некоторых платформах (особенно во всех версиях IE), для которых вам необходимо предоставить внешний полифилл в любом случае.
Лука
3
Добавление к разнице, упомянутой @ jack123 fetch, также не обеспечивает базовую функциональность Ajax, такую ​​как timeout(что очень странно), мы должны использовать отдельный модуль для реализации этой базовой функциональности.
Апурва Джайн
2
@LucasKatayama Похоже, что ссылка не работает
vancy-брюк
30

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

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

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

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

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

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

введите описание изображения здесь

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

Тилина Сампат
источник
4
Согласовано. Axios - это также небольшой импорт, так что раздувание не вызывает особого беспокойства - в отличие от чего-то вроде экспресс или мангуст, где, если кто-то немного сходит с ума по размеру упаковки, они могут быть обеспокоены. :)
CodeFinity
1
Пожалуйста, не возвращайте законные правки и не копируйте контент без указания авторства.
Джоншарп
9

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

  • При использовании сервисного работника вы должны использовать API выборки, только если вы хотите перехватить HTTP-запрос
  • Ex. При выполнении кэширования в PWA с использованием сервисного работника вы не сможете кэшировать, если используете Axios API (он работает только с API выборки)
Вайбхав Бахчав
источник
6
Кто-нибудь может убедиться, что это действительно так? Это 1 человек, но 9 проголосовавших, похоже, согласны, но было бы неплохо увидеть комментарии (я использую axios с работником службы pwa в автономном режиме, поэтому я спрашиваю.
Том Стиккель
Конечно, у нас может быть еще несколько комментариев по этому поводу, но у меня возникли проблемы с кэшированием при использовании axios, и когда я заменил axios API-интерфейсами fetch (), это было решено
Vaibhav Bacchav
1
Это кажется правильным, но может быть исправлено в ближайшем будущем: github.com/axios/axios/pull/2891
архив
7

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

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

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

Даниил
источник
1
Выборка в порядке, но Аксиос, как вы сказали, более прост. То, что встроено в современные браузеры (fetch), не очень хорошо для выпусков функций. - поэтому я предпочитаю Аксиос
Том Стиккель
5

Кроме того ... Я играл с разными библиотеками в моем тесте и заметил, что они по-разному обрабатывают запросы 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.

cyberwombat
источник
1
@baitun - это мои тестовые модули, в которых (кажется, я использовал Mocha) часто есть .throwsметод для проверки ошибок. В этом случае я тестировал отклонения от всех 3 библиотек и заметил разницу в данных, которые были возвращены.
cyberwombat
3

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

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

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

Хайро Маланай
источник