Quelle est la différence entre Axios et Fetch?

Réponses:

165

Fetch et Axios ont des fonctionnalités très similaires, mais pour plus de compatibilité ascendante, Axios semble mieux fonctionner (la récupération ne fonctionne pas dans IE 11 par exemple, consultez ce post )

De plus, si vous travaillez avec des requêtes JSON, voici quelques différences sur lesquelles je suis tombé par hasard.

Récupérer la demande de publication 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 publication 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
}

Alors:

  • Fetch's body = données d' Axios
  • Le corps de Fetch doit être stringifié , les données d'Axios contiennent l' objet
  • Fetch n'a pas d'URL dans l'objet de requête, Axios a une URL dans l'objet de requête
  • La fonction de demande de récupération inclut l' url en tant que paramètre , la fonction de demande d'Axios n'inclut pas l'url en tant que paramètre .
  • La requête de récupération est correcte lorsque l'objet de réponse contient la propriété ok , la requête Axios est ok lorsque le statut est 200 et statusText est 'OK'
  • Pour obtenir la réponse de l'objet json: dans fetch, appelez la fonction json () sur l'objet de réponse, dans Axios obtenir la propriété data de l'objet de réponse.

J'espère que cela t'aides.

c-chavez
la source
Voici plus de question. Une fois que responseOk est vrai, devons-nous vérifier l'état dans response.data s'il a un statut fourni? merci
Yang Wang
1
Axios request is ok when status is 200 and statusText is 'OK' Qu'en est-il des autres httpStatus de la gamme 2xx comme 201 ou 204?
leonbloy
46

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

Je me retrouve avec le même doute mais le tableau de ce post me fait partir isomorphic-fetch. Ce qui ne fetchfonctionne qu'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: entrez la description de l'image ici

Lucas Katayama
la source
6
Je ne suis toujours pas en mesure de trouver l'avantage de chercher sur axios. Pouvez-vous avoir une idée de pourquoi je devrais aller avec les axios?
Gorakh Nath
4
Je pense que fetch est un standard voir fetch.spec.whatwg.org ... axios pourrait avoir plus de fonctionnalités car il ne suit pas ça .... Je pense qu'à la fin ils font les bases (requête ajax http) mais cela dépend sur ce dont vous avez besoin ... je n'avais pas besoin d'un transformateur ... donc obtenir une bibliothèque standard est un pro ...
Lucas Katayama
4
Sachez que ce tableau est trompeur. Il se définit fetchcomme natif (ce qui signifie que vous pouvez simplement l'utiliser - pas besoin d'inclure une bibliothèque , en fonction de la source de la table), alors qu'il fetchn'est en fait pas implémenté dans certaines plates-formes (notamment dans toutes les versions d'IE), pour lesquelles vous devez fournir un polyfill externe de toute façon.
Luca Fagioli
3
Ajouter à la différence mentionnée par @ jack123 fetch ne fournit pas non plus de fonctionnalité ajax de base comme timeout(ce qui est très étrange), nous devons utiliser un module séparé pour implémenter cette fonctionnalité de base.
Apurva jain
2
@LucasKatayama Le lien semble être rompu
vancy-pants
30

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 ne soit faite ou après qu'une réponse est reçue

  • Intercepteurs: vous permettent de modifier entièrement la demande ou la réponse (en-têtes également). également, effectuez des opérations asynchrones avant qu'une demande ne soit faite ou avant que Promise ne se règle

  • Intégré XSRF protection

veuillez vérifier le support du navigateur Axios

entrez la description de l'image ici

Je pense que vous devriez utiliser axios.

Thilina Sampath
la source
4
D'accord. Axios est également une petite importation, de sorte que le gonflement n'est pas très préoccupant - par opposition à quelque chose comme express ou mangouste où si l'on est un peu fou de la taille du paquet, ils pourraient être concernés. :)
CodeFinity
1
Veuillez ne pas annuler les modifications légitimes ni copier le contenu sans attribution.
jonrsharpe
9

Une autre différence majeure entre l'API Fetch et l'API Axios

  • Lors de l'utilisation du service worker, vous devez utiliser Fetch API uniquement si vous souhaitez intercepter la requête HTTP
  • Ex. Lors de la mise en cache dans PWA à l'aide du service worker, vous ne pourrez pas mettre en cache si vous utilisez l'API axios (cela ne fonctionne qu'avec Fetch API)
Vaibhav Bacchav
la source
6
Quelqu'un peut-il vérifier que c'est vraiment vrai? Il s'agit d'une personne, mais les 9 votes positifs semblent d'accord mais ce serait bien de voir des commentaires à ce sujet (j'utilise axios avec un technicien de service pwa hors ligne, c'est pourquoi je le demande.
Tom Stickel
Bien sûr, nous pouvons avoir quelques commentaires supplémentaires à ce sujet, mais je rencontrais des problèmes de mise en cache lors de l'utilisation d'axios et lorsque j'ai remplacé axios par les API fetch (), cela a été résolu
Vaibhav Bacchav
1
Cela semble correct, mais pourrait être corrigé dans un proche avenir: github.com/axios/axios/pull/2891
arkhz
7

Axios est un package tiers autonome qui peut être facilement installé dans un projet React à l'aide de NPM.

L'autre option que vous avez mentionnée est la fonction d'extraction. Contrairement à Axios, fetch()est intégré à la plupart des navigateurs modernes. Avec fetch, vous n'avez pas besoin d'installer un package tiers.

Donc c'est à vous de décider, vous pouvez y aller fetch()et potentiellement gâcher si vous ne savez pas ce que vous faites OU simplement utiliser Axios, ce qui est plus simple à mon avis.

Daniel
la source
1
Fetch est ok, mais Axios est comme vous l'avez dit - plus simple. Ce qui est intégré dans les navigateurs modernes (fetch) n'est pas terrible pour les versions de fonctionnalités. - donc je préfère Axios
Tom Stickel
5

De plus ... je jouais avec différentes bibliothèques dans mon test et j'ai remarqué leur gestion différente des requêtes 4xx. Dans ce cas, mon test renvoie un objet json avec une réponse 400. Voici comment 3 bibliothèques populaires gèrent 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-nativeet de axioslancer une réponse 4xx alors que ce node-fetchn'est pas le cas. fetchUtilise également une promesse pour l'analyse json.

cyberwombat
la source
1
@baitun, ce sont moi qui exécute des tests unitaires qui (je pense que j'utilisais Mocha) ont souvent une .throwsméthode pour tester les erreurs lancées. Dans ce cas, je testais les rejets de toutes les 3 bibliothèques et j'ai remarqué la différence dans les données renvoyées.
cyberwombat
3

Avantages d'axios:

  • Transformateurs: permettent d'effectuer des transformations sur les données avant la demande ou après la réception de la réponse
  • Intercepteurs: vous permettent de modifier entièrement la demande ou la réponse (en-têtes également). effectuer également des opérations asynchrones avant que la demande ne soit faite ou avant que la promesse ne s'installe
  • Protection XSRF intégrée

Avantages de axiosplusfetch

Jairo Malanay
la source