Qual è la differenza tra Axios e Fetch?

Sto chiamando il servizio web usando fetch ma lo stesso che posso fare con l'aiuto di axios. Quindi ora sono confuso. Dovrei andare per axios o prendere?

Fetch e Axios sono molto simili in termini di funzionalità, ma per una maggiore compatibilità con le versioni precedenti Axios sembra funzionare meglio (ad esempio, il recupero non funziona in IE 11, controlla questo post )

Inoltre, se lavori con richieste JSON, le seguenti sono alcune differenze con cui mi sono imbattuto.

Recupera richiesta post 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
}

Richiesta post 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
}

Così:

• Fetch's body = Dati di Axios
• Il corpo di Fetch deve essere stretto , i dati di Axios contengono l' oggetto
• Fetch ha url nella richiesta di oggetto, Axios ha url in oggetto di richiesta
• La funzione di richiesta di recupero include l' URL come parametro , la funzione di richiesta di Axios non include l'URL come parametro .
• La richiesta di recupero è ok quando l'oggetto response contiene la proprietà ok , la richiesta Axios è ok quando lo stato è 200 e statusText è 'OK'
• Per ottenere la risposta dell'oggetto JSON: in fetch chiamare il json () sull'oggetto risposta, in Axios ottenere la proprietà data dell'oggetto risposta.

Spero che questo ti aiuti.

Sono librerie di richieste HTTP ...

Finisco con lo stesso dubbio, ma il tavolo in questo post mi fa andare avanti isomorphic-fetch. Che è fetchma funziona con NodeJS.

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

Il link sopra è morto La stessa tabella è qui: https://www.javascriptstuff.com/ajax-libraries/

O qui:

Secondo mzabriskie su GitHub :

Nel complesso sono molto simili. Alcuni vantaggi di axios:

• Trasformatori: consente di eseguire trasformazioni sui dati prima di effettuare una richiesta o dopo aver ricevuto una risposta

• Intercettori: consentono di modificare completamente la richiesta o la risposta (anche le intestazioni). inoltre, eseguire operazioni asincrone prima che venga effettuata una richiesta o prima che la promessa si risolva

• Built-in XSRF protezione

si prega di controllare Browser Support Axios

Penso che dovresti usare gli axios.

Un'altra importante differenza tra API di recupero e API axios

• Durante l'utilizzo dell'assistente tecnico, è necessario utilizzare solo l'API di recupero se si desidera intercettare la richiesta HTTP
• Ex. Durante l'esecuzione della memorizzazione nella cache in PWA utilizzando il service man non sarà possibile memorizzare nella cache se si utilizza l'API axios (funziona solo con l'API di recupero)

Axios è un pacchetto autonomo di terze parti che può essere facilmente installato in un progetto React utilizzando NPM.

L'altra opzione che hai citato è la funzione di recupero. A differenza di Axios,fetch() è integrato nei browser più moderni. Con fetch non è necessario installare un pacchetto di terze parti.

Quindi dipende da te, puoi andare avanti fetch()e potenzialmente incasinare se non sai cosa stai facendo O semplicemente usare Axios che è più semplice secondo me.

Inoltre ... stavo giocando con varie librerie nel mio test e ho notato la loro diversa gestione delle richieste 4xx. In questo caso il mio test restituisce un oggetto json con una risposta 400. Ecco come 3 librerie popolari gestiscono la risposta:

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

Di interesse è quello request-promise-nativee axiosgetta sulla risposta 4xx mentre node-fetchnon lo fa. fetchUtilizza anche una promessa per l'analisi json.

Vantaggi degli assi:

• Trasformatori: consente di eseguire trasformazioni sui dati prima che venga effettuata la richiesta o dopo aver ricevuto la risposta
• Intercettori: consentono di modificare completamente la richiesta o la risposta (anche le intestazioni). eseguire anche operazioni asincrone prima che venga effettuata la richiesta o prima che la promessa si risolva
• Protezione XSRF integrata

Vantaggi di axiosoltrefetch