Quelle est la différence entre Axios et Fetch?
J'appelle le service Web en utilisant fetch, mais je peux le faire avec l'aide d'axios. Alors maintenant je suis confus. Dois-je choisir axios ou chercher?
Ce sont des bibliothèques de requêtes HTTP ...
Je me retrouve avec le même doute, mais la table dans ce post me fait aller avec isomorphic-fetch. Ce qui est fetch mais fonctionne avec NodeJS.
Fetch et Axios ont des fonctionnalités très similaires, mais pour davantage de compatibilité ascendante, Axios semble mieux fonctionner (le fetch ne fonctionne pas dans IE 11 par exemple, vérifiez cet article )
De plus, si vous travaillez avec des requêtes JSON, voici quelques différences avec lesquelles je suis tombé par hasard.
Récupérer une 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 = data d'Axios
- Le corps de Fetch doit être stringified, les données d'Axios contiennent le object
- Fetch n'a pas d'URL dans l'objet de requête, Axios a url dans un objet de requête
- La fonction de requête de récupération inclut le url en tant que paramètre, la fonction de requête Axios n'inclut pas l'URL en tant que paramètre.
- La requête de récupération est ok lorsque l'objet de réponse contient la propriété ok, la requête Axios est ok lorsque status est égal à 200 et statusText à la valeur 'OK'
- Pour obtenir la réponse de l'objet json: dans fetch, appelez la fonction json () sur l'objet réponse, dans Axios, récupérez la propriété data de l'objet réponse.
J'espère que cela t'aides.
Selon mzabriskiesur GitHub :
Dans l'ensemble, ils sont très similaires. Quelques avantages d'axios:
Transformers: permettent d'effectuer des transformations sur des données avant qu'une requête soit faite ou après la réception d'une réponse
Intercepteurs: vous permettent de modifier entièrement la demande ou la réponse (en-têtes également). De plus, effectuez des opérations asynchrones avant qu'une demande ne devienne faite ou avant que Promise ne soit réglée
Built-in XSRF protection
Je pense que vous devriez utiliser axios.
Étiez curieux à propos de cela aussi, avez trouvé votre question ici, puis ce post sur Medium qui pourrait s'avérer utile. Rechercher semble un peu plus verbeux et impitoyable: https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte
Encore une différence majeure entre les API fetch et API axios
- Lors de l'utilisation de service worker, vous devez tiliser uniquement l'API d'extraction si vous souhaitez intercepter la requête HTTP
- Ex. Lors de la mise en cache dans PWA à l'aide de service worker, vous ne pourrez pas mettre en cache si vous utilisez l'API axios (cela ne fonctionne qu'avec l'API d'extraction).
De plus ... lors de mon test, je jouais avec différentes bibliothèques et j'ai remarqué leur traitement différent 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-native et axios jettent une réponse 4xx alors que node-fetch ne le fait pas. De plus, fetch utilise une promesse pour l'analyse json.
Avantages d'axios:
- Transformers: permet d'effectuer des transformations sur des données avant que la demande soit faite 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). effectuez également des opérations asynchrones avant la demande ou avant le règlement de Promise
- Protection XSRF intégrée
axios et fetch sont fréquemment utilisés dans les applications React pour la gestion des requêtes réseau et la gestion d’une certaine quantité de données.
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. Ce n'est pas un paquet, c'est une fonction singulière intégrée à la plupart des navigateurs modernes. Avec fetch, vous n'avez pas besoin d'installer un package tiers.
Donc, la quantité de code est légèrement inférieure si vous utilisez chercher sur axios. Cependant, fetch est une fonction plus basique et de niveau inférieur à utiliser pour récupérer des données. Ce n'est pas la pire chose au monde, mais si vous utilisez fetch, vous finirez par écrire beaucoup de code déjà écrit pour vous dans axios.
Donc, c'est un choix entre un D.I.Y. avec fetch et peut-être gâcher si vous ne savez pas ce que vous faites OR, utilisez simplement axios et tous les écrous et boulons sont pris en charge pour vous.
Personnellement, j'utilise axios dans tous mes projets, car axios traite les demandes réseau de manière prévisible, contrairement à certains cas extrêmes de fetch qui ne font pas une expérience formidable.