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

54

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

Теги:
xmlhttprequest
es6-promise
es6-modules

8 ответов

20
Лучший ответ

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

В итоге у меня возникают те же сомнения, но таблица в этой post заставляет меня пойти с isomorphic-fetch. Это fetch, но работает с NodeJS.

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

  • 3
    Тем не менее, я не могу найти преимущества fetch по сравнению с axios. Можете ли вы представить, почему я должен идти с аксиосами?
  • 1
    Я нашел некоторые различия как: - В целом они очень похожи. Некоторые преимущества axios: Трансформаторы: позволяют выполнять преобразования данных перед выполнением запроса или после получения ответа. Перехватчики: позволяют полностью изменить запрос или ответ (также заголовки). также выполнять асинхронные операции перед выполнением запроса или до разрешения Promise Встроенная защита XSRF
Показать ещё 7 комментариев
17

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
}

Так:

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

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

8

Согласно mzabriskie на GitHub:

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

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

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

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

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

  • 1
    Согласовано. Axios - это также небольшой импорт, так что раздувание не вызывает особого беспокойства - в отличие от чего-то вроде express или mongoose, где, если кто-то немного помешан на размере пакета, они могут быть обеспокоены. :)
  • 0
    Пожалуйста, не возвращайте законные изменения и не копируйте контент без указания авторства.
6

Интересно было об этом, нашел здесь свой вопрос, а затем нашел этот средний пост, который может оказаться полезным. Fetch кажется немного более подробным и неумолимым: https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte

  • 2
    Хм. Постер специально спрашивал мнение о том, какую библиотеку использовать, поэтому любой ответ, который отвечает «А против В», будет предвзятым по отношению к одному или другому по определению. API-интерфейсы постоянно меняются, и у каждого есть свое мнение, поэтому я сформулировал эту статью как «может оказаться полезным». Если у вас есть лучшее предложение для плаката, то вы должны опубликовать его.
  • 0
    Я просто имел в виду, что между Fetch & Axios должно быть правильное сравнение.
Показать ещё 1 комментарий
1

axios и fetch часто используются в приложениях React для управления сетевыми запросами и управления некоторым объемом данных.

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

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

Таким образом, объем кода немного меньше, если вы используете fetch over axios. Однако выборка - это более простая и низкоуровневая функция, используемая для извлечения данных. Это не самая плохая вещь в мире, но если вы используете fetch, вы в конечном итоге напишите много кода, который уже написан для вас в axios.

Так что это выбор между "сделай сам" с извлечением и, возможно, испорченным, если вы не знаете, что делаете, или просто используете аксиосы, и все гайки и болты позаботятся о вас.

Я лично использую axios во всех моих проектах, потому что axios обрабатывает сетевые запросы предсказуемым образом, в отличие от некоторых угловых случаев с fetch, которые не дают большого опыта.

1

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

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

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

https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

Я думаю, что эта ссылка будет полезна.

0

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

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

Преимущества axios за fetch

Ещё вопросы

Сообщество Overcoder
Наверх
Меню