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

Ответ 1

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

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

Ответ 2

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

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

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

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

Или здесь:

Ответ 3

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

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

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

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

• Built-in XSRF protection

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

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

Ответ 9

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

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