Чим відрізняється Axios від Fetch?

Я закликаю веб-сервіс за допомогою вибору, але те саме, що я можу зробити за допомогою axios. Тож тепер я розгублений. Чи варто їхати або по аксіосам, або за добу?

Fetch і Axios дуже схожі за функціональністю, але для більшої зворотної сумісності Axios, здається, працює краще (наприклад, не працює в 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 повинно бути впорядковано , дані Axios містять об'єкт
• У "Вилучення " немає URL-адреси в об'єкті запиту, Axios має URL-адресу в об'єкті запиту
• Функція отримання запиту включає URL як параметр , функція запиту Axios не включає URL як параметр .
• Запит на отримання нормально, коли об'єкт відповіді містить властивість ok , запит Axios - це нормально, коли стан 200, а statusText - "ОК"
• Щоб отримати відповідь об'єкта json: у виклику для виклику функції json () на об'єкт відповіді, в Axios отримують властивість даних об'єкта відповіді.

Сподіваюся, це допомагає.

Вони є бібліотеками запитів HTTP ...

Я закінчуюсь тим же сумнівом, але таблиця в цій публікації змушує мене піти isomorphic-fetch. Що є, fetchале працює з NodeJS.

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

Посилання вище мертве. Та сама таблиця тут: https://www.javascriptstuff.com/ajax-libraries/

Або тут:

За інформацією mzabriskie на GitHub :

В цілому вони дуже схожі. Деякі переваги axios:

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

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

• Вбудований захист XSRF

перевірте Axios для підтримки браузера

Я думаю, вам слід використовувати аксіоси.

Ще одна основна відмінність між API API і axios API

• Під час використання сервісного працівника ви повинні використовувати API отримання лише у випадку, якщо ви хочете перехопити HTTP-запит
• Вих. Під час виконання кешування в PWA за допомогою сервісного працівника ви не зможете кешувати, якщо ви використовуєте API axios (він працює лише з API отримання)

Axios - це окремий сторонній пакет, який легко встановити в проект React за допомогою NPM.

Інший варіант, який ви згадали, - це функція отримання. На відміну від Axios, 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.

Переваги аксіосу:

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

Переваги axiosпонадfetch