Quelle est la différence entre Axios et Fetch?

J'appelle le service Web en utilisant fetch mais je peux faire la même chose avec l'aide d'axios. Alors maintenant, je suis confus. Dois-je opter pour axios ou chercher?

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.

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:

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

Je pense que vous devriez utiliser axios.

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)

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.

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.

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