Quelle est la différence entre Axios et Fetch ?

Question

J'appelle le service web en utilisant Fetch mais je peux faire la même chose avec l'aide d'Axios. Je suis donc perdu. Dois-je choisir Axios ou Fetch ?

Answer 1

Fetch et Axios sont très similaires en termes de fonctionnalités, mais pour une meilleure compatibilité ascendante, Axios semble mieux fonctionner (fetch ne fonctionne pas dans IE 11 par exemple, vérifiez ce poste )

Par ailleurs, si vous travaillez avec des requêtes JSON, voici quelques différences sur lesquelles je suis tombé.

Récupérer la requête 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
}

Demande de post JSON d'Axios

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
}

Donc :

• Fetch's corps \= Axios' données
• Le corps de Fetch doit être stringifié Les données d'Axios contiennent les objet
• Aller chercher n'a pas d'url dans l'objet de la demande, Axios a url dans l'objet de la demande
• La fonction de demande de récupération comprend la url comme paramètre , fonction de demande d'Axios n'inclut pas l'url comme paramètre .
• La demande de recherche est ok lorsque l'objet de la réponse contient le propriété ok La demande d'Axios est ok quand le statut est 200 y statusText est 'OK'.
• Pour obtenir la réponse de l'objet json : dans fetch, appelez la fonction Fonction json() sur l'objet de réponse, dans Axios obtenir propriété des données de l'objet de la réponse.

Answer 2

Ce sont des bibliothèques de requêtes HTTP...

Je me retrouve avec le même doute mais la table dans ce poste me fait aller avec isomorphic-fetch . Ce qui est fetch mais fonctionne avec NodeJS.

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

---

Le lien ci-dessus est mort Le même tableau est ici : https://www.javascriptstuff.com/ajax-libraries/

Ou ici :

Answer 3

Selon mzabriskie sur GitHub :

Dans l'ensemble, ils sont très similaires. Quelques avantages d'axios :

• Transformateurs : permettent d'effectuer des transformations sur les données avant qu'une demande soit faite ou après la réception d'une réponse.

• Intercepteurs : permettent de modifier entièrement la demande ou la réponse (y compris les en-têtes). ou avant que Promise ne s'installe

• Intégré dans XSRF protection

veuillez vérifier le support du navigateur Axios

Je pense que vous devriez utiliser axios.

Answer 4

J'étais aussi curieux à ce sujet, j'ai trouvé votre question ici, puis j'ai trouvé ce billet de Medium qui peut s'avérer utile. Fetch semble un peu plus verbeux et impitoyable : https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte

Answer 5

En outre... J'ai joué avec diverses librairies dans mon test et j'ai remarqué que leur traitement différent des demandes 4xx. Dans ce cas, mon test retourne un objet json avec une réponse 400. Voici comment 3 librairies populaires traitent la réponse :

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

Il est intéressant de noter que request-promise-native y axios lancer sur la réponse 4xx alors que node-fetch ne le fait pas. Aussi fetch utilise une promesse pour l'analyse de Json.