Jaka jest różnica między Axios i Fetch?

Odpowiedzi:

164

Fetch i Axios mają bardzo podobne funkcje, ale dla większej kompatybilności wstecznej Axios wydaje się działać lepiej (pobieranie nie działa na przykład w IE 11, sprawdź ten post )

Ponadto, jeśli pracujesz z żądaniami JSON, poniżej znajdują się pewne różnice, na które się natknąłem.

Pobierz żądanie publikacji 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
}

Żądanie postu 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
}

Więc:

  • Fetch's body = Axios ' dane
  • Treść Fetch musi zostać poddana stringifikacji , dane Axiosa zawierają rozszerzenie obiekt
  • Fetch nie ma adresu URL w obiekcie żądania, Axios ma adres URL w obiekcie żądania
  • Funkcja żądania pobrania zawiera adres url jako parametr , funkcja żądania Axios nie zawiera adresu URL jako parametru .
  • Żądanie pobierania jest prawidłowe, gdy obiekt odpowiedzi zawiera właściwość ok , żądanie Axios jest prawidłowe, gdy status to 200 i tekst statusu to 'OK'
  • Aby uzyskać odpowiedź obiektu json: w funkcji fetch wywołaj funkcję json () na obiekcie odpowiedzi, w Axios pobierz właściwość obiektu response.

Mam nadzieję że to pomoże.

c-chavez
źródło
Tutaj jest więcej pytań. Gdy odpowiedźOk jest prawdą, czy musimy sprawdzić status w response.data, jeśli ma status podany? dzięki
Yang Wang
1
Axios request is ok when status is 200 and statusText is 'OK' A co z innymi httpStatus z zakresu 2xx, takimi jak 201 lub 204?
leonbloy
46

Są to biblioteki żądań HTTP ...

Kończę z tymi samymi wątpliwościami, ale tabela w tym poście skłania mnie do działania isomorphic-fetch. Co jest, fetchale działa z NodeJS.

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


Powyższy link nie działa. Ta sama tabela jest tutaj: https://www.javascriptstuff.com/ajax-libraries/

Lub tu: wprowadź opis obrazu tutaj

Lucas Katayama
źródło
6
Nadal nie jestem w stanie znaleźć korzyści z pobierania ponad axios. Czy masz pojęcie, dlaczego powinienem wybrać axios?
Gorakh Nath
4
Myślę, że pobieranie jest standardem, patrz fetch.spec.whatwg.org ... axios może mieć więcej funkcji, ponieważ nie wynika z tego .... Myślę, że w końcu robią podstawy (żądanie Ajax http), ale to zależy na to, czego potrzebujesz ... Nie potrzebowałem transformatora ... więc zdobycie standardowego lib jest profesjonalistą ...
Lucas Katayama
4
Pamiętaj, że ta tabela wprowadza w błąd. Definiuje się fetchjako natywny (co oznacza, że ​​możesz go po prostu użyć - nie ma potrzeby dołączania biblioteki , zgodnie ze źródłem tabeli), podczas gdy w rzeczywistości niefetch jest zaimplementowany na niektórych platformach (szczególnie we wszystkich wersjach IE), dla których musisz podać i tak zewnętrzny polyfill.
Luca Fagioli
3
Dodając do różnicy wspomnianej przez @ jack123 fetch, również nie zapewnia podstawowej funkcjonalności Ajax, takiej jak timeout(co jest bardzo dziwne), musimy użyć oddzielnego modułu, aby zaimplementować tę podstawową funkcjonalność.
Apurva jain
2
@LucasKatayama Link wygląda na uszkodzony
vancy-pants
30

Według mzabriskie na GitHub :

Ogólnie są bardzo podobne. Niektóre zalety Axios:

  • Transformatory: umożliwiają wykonywanie transformacji danych przed wysłaniem żądania lub po otrzymaniu odpowiedzi

  • Interceptory: pozwalają całkowicie zmienić żądanie lub odpowiedź (również nagłówki). również wykonaj operacje asynchroniczne przed wysłaniem żądania lub przed rozliczeniem Promise

  • Wbudowana ochrona XSRF

sprawdź Wsparcie przeglądarek Axios

wprowadź opis obrazu tutaj

Myślę, że powinieneś użyć axios.

Thilina Sampath
źródło
4
Zgoda. Axios jest również niewielkim importem, więc wzdęcia nie są wielkim problemem - w przeciwieństwie do czegoś takiego jak ekspres lub mangusta, gdzie jeśli ktoś jest trochę szalony co do rozmiaru paczki, może się martwić. :)
CodeFinity
1
Nie cofaj uzasadnionych zmian ani nie kopiuj treści bez podania źródła.
jonrsharpe
9

Jeszcze jedna główna różnica między API pobierania a API Axios

  • Korzystając z Service Workera, musisz używać tylko Fetch API wtedy, gdy chcesz przechwycić żądanie HTTP
  • Dawny. Podczas wykonywania cache'owania w PWA za pomocą Service Workera nie będziesz mógł cache'ować jeśli używasz API axios (działa tylko z API pobierania)
Vaibhav Bacchav
źródło
6
Czy ktoś może zweryfikować, że to prawda? To jest 1 osoba, ale 9 głosów pozytywnych wydaje się zgadzać, ale fajnie byłoby zobaczyć komentarze na ten temat (używam Axios z pracownikiem serwisu pwa offline, dlatego pytam.
Tom Stickel
Jasne, możemy mieć więcej komentarzy na ten temat, ale napotkałem problemy z buforowaniem podczas korzystania z axios i kiedy zastąpiłem axios przez API fetch (), problem został rozwiązany
Vaibhav Bacchav
1
Wydaje się, że to prawda, ale może zostać naprawione w najbliższej przyszłości: github.com/axios/axios/pull/2891
arkhz
7

Axios to samodzielny pakiet innej firmy, który można łatwo zainstalować w projekcie React za pomocą NPM.

Inną opcją, o której wspomniałeś, jest funkcja pobierania. W przeciwieństwie do Axios, fetch()jest wbudowany w większość nowoczesnych przeglądarek. Dzięki fetch nie musisz instalować pakietu innej firmy.

Więc to zależy od ciebie, możesz iść fetch()i potencjalnie zepsuć, jeśli nie wiesz, co robisz LUB po prostu użyj Axios, co moim zdaniem jest prostsze.

Daniel
źródło
1
Pobieranie jest w porządku, ale Axios jest tak, jak powiedziałeś - prostsze. To, co jest wbudowane w nowoczesne przeglądarki (pobieranie), nie jest dobre w przypadku wydań funkcji. - więc wolę Axiosa
Tom Stickel,
5

Ponadto ... bawiłem się różnymi bibliotekami w moim teście i zauważyłem ich różną obsługę żądań 4xx. W tym przypadku mój test zwraca obiekt json z odpowiedzią 400. Oto jak 3 popularne biblioteki obsługują odpowiedź:

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

Interesujące jest to request-promise-nativei axioswrzuć odpowiedź 4xx, podczas gdy node-fetchnie. Również fetchużywa obietnicę json parsowania.

cyberwombat
źródło
1
@baitun to ode mnie testy jednostkowe, które (myślę, że używałem Mocha) często mają .throwsmetodę testowania zgłaszanych błędów. W tym przypadku testowałem odrzucenia z bibliotek al 3 i zauważyłem różnicę w zwróconych danych.
cyberwombat
3

Korzyści z Axios:

  • Transformatory: umożliwiają wykonywanie transformacji danych przed wysłaniem żądania lub po otrzymaniu odpowiedzi
  • Interceptory: pozwalają całkowicie zmienić żądanie lub odpowiedź (również nagłówki). również wykonywać operacje asynchroniczne przed wysłaniem żądania lub przed rozliczeniem Promise
  • Wbudowana ochrona XSRF

Zalety axiosponadfetch

Jairo Malanay
źródło