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

Dzwonię do usługi sieciowej za pomocą funkcji pobierania, ale to samo mogę zrobić z pomocą axios. Więc teraz jestem zdezorientowany. Powinienem wybrać axios czy aportować?

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.

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:

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

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

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)

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.

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.

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