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

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

45
ajax es6-modules es6-promise reactjs xmlhttprequest

6 ответов

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

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

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

19

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

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

Fetch JSON post request

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 запрос

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
}

Так:

  • проныре тело = "Аксиос"' сведения
  • тело Фетча должно быть stringified, данные Axios содержат объект
  • Fetch не имеет url в объекте запроса Axios имеет url в объекте запроса
  • функция запроса выборки включает в себя url в качестве параметра, функция запроса Axios не включает url в качестве параметра.
  • Fetch запрос ok когда объект ответа содержит ok свойство, Axios запрос ok, когда статус 200 и statusText 'OK'
  • чтобы получить ответ объекта json: в fetch вызовите функция json () на объекте ответа, в Axios get сведения собственность объект ответа.

надеюсь, что это помогает.

8

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

7

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

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

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

7

дополнительно... Я играл с различными либами в своем тесте и заметил их различную обработку запросов 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 бросок на ответ 4хх а node-fetch - нет. Также fetch использует обещание для разбора json.

1

преимущества axios:

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

преимущества axios над fetch

0