COMPARAISON
Rétrocompatibilité, surveillance de la development du téléchargement, and so forth.
Dans mon article précédent, «Informations approfondies sur l’API Fetch de JavaScript”, J’ai abordé les bases de l’API Fetch. Mais cela vaut la peine de le reconnaître fetch() n’est pas toujours une resolution idéale, et il existe parfois de meilleures alternate options pour faire des requêtes HTTP. Ici, je vais décrire pourquoi Axios est meilleur que fetch() en développement. Ceci est mon 36e article sur Medium.
Aller chercher
Fetch() fait partie d’une méthode d’objet fenêtre JavaScript au sein de l’API Fetch. Il est intégré, les utilisateurs n’ont donc pas à l’installer. Fetch() nous permet d’obtenir des données de l’API de manière asynchrone sans installer de bibliothèques supplémentaires.
Le morceau de code ci-dessus est un easy fetch() obtenir la demande. Dans le fetch() méthode, il y a un argument obligatoire, qui est url. url est un chemin à partir duquel l’utilisateur souhaite obtenir des données. Alors fetch() La méthode renvoie une promesse qui peut résoudre l’objet de réponse ou le rejeter avec une erreur.
Les deuxièmes arguments du fetch() methodology sont des choices, et elles sont facultatives. Si l’utilisateur ne transmet pas les choices, la demande est toujours reçue et télécharge le contenu à partir de l’URL donnée. Comme je l’ai mentionné précédemment, la promesse renvoie l’objet de réponse, et à trigger de cela, les utilisateurs doivent utiliser une autre méthode pour obtenir un corps de la réponse. Il existe différentes méthodes que les utilisateurs peuvent utiliser en fonction du format du corps.
response.json()response.textual content()response.blob()response.formData()response.arrayBuffer()
Le plus populaire est response.json().
Malheureusement, le fetch() la fonction n’est pas dans Node.js, mais il y a un polyfill comme extraction de nœud. Entre node-fetch et le navigateur fetch()il existe plusieurs connus variantes.
Axios
Axios est une bibliothèque JavaScript permettant de faire des requêtes HTTP depuis Node ou XMLHttpRequest ou un navigateur. En tant que bibliothèque moderne, elle est basée sur l’API Promise. Axios présente certains avantages, comme la safety contre les attaques de falsification de requête intersite (CSFR). Pour pouvoir utiliser la bibliothèque Axios, les utilisateurs doivent l’installer et l’importer dans votre projet, en utilisant CDN, npm, Yarn ou Bower.
Le morceau de code ci-dessus est une méthode get et un easy rappel pour une réponse et une erreur. Lorsque les utilisateurs créent un objet de configuration, ils peuvent définir un tas de propriétés. Les plus courantes sont url, baseURL, params, auth, headers, responseTypeet knowledge.
En réponse, Axios renvoie une promesse qui se résoudra avec l’objet de réponse ou un objet d’erreur. Dans l’objet de réponse, il y a les valeurs suivantes :
knowledge: Corps de la réponse réellestanding: code d’état HTTP de l’appel, comme200ou404statusText: statut HTTP sous forme de message texteheaders: Le même que dans la requêteconfig: Demande de configurationrequest: Objet XMLHttpRequest (XHR)
Les utilisateurs doivent travailler avec deux promesses dans fetch(). Les utilisateurs peuvent éviter le passe-partout et écrire un code plus propre et plus succinct dans Axios.
Axios utilise le knowledge propriété, mais fetch() utilise le physique propriété pour traiter les données. fetch()c’est knowledge est stringifié. Dans fetch()l’URL est transmise en tant qu’argument, mais dans Axios, l’URL est définie dans l’objet de configuration.
Aller chercher
En utilisant le fetch() méthode, les utilisateurs doivent utiliser une sorte de méthode sur les données de réponse. Lorsque les utilisateurs envoient le corps avec la demande, ils doivent chaîner les données.
Dans le morceau de code ci-dessus, avec la réponse, les utilisateurs doivent traiter le response.json() motion. Lorsque vous traitez les données JSON dans fetch(), il y a un processus en deux étapes. Les utilisateurs doivent d’abord faire la demande proprement dite, puis appeler le .json() méthode sur la réponse.
Axios
Dans Axios, les utilisateurs transmettent des données dans la demande ou obtiennent des données à partir de la réponse, et les données sont automatiquement stringifiées. Par conséquent, aucune autre opération n’est requise.
Dans l’exemple ci-dessus, vous pouvez voir que vous n’en avez besoin que d’un then.
La transformation automatique des données est une fonctionnalité intéressante à avoir dans Axios.
Aller chercher
Chaque fois que vous obtenez une réponse du fetch() méthode, vous devez vérifier si le statut est un succès automotive même si ce n’est pas le cas, vous obtiendrez la réponse. Dans le cas d fetch()une promesse ne sera pas résolue si et seulement si la demande ne sera pas complétée.
Fetch() ne génère pas d’erreurs réseau. Par conséquent, vous devez toujours vérifier le response.okay propriété lorsque vous travaillez avec fetch(). Vous pouvez extraire cette erreur de vérification dans une fonction pour la rendre plus facile et plus réutilisable.
Axios
Dans Axios, la gestion des erreurs est assez easy automotive Axios génère des erreurs réseau. S’il y aura une mauvaise réponse comme 404, la promesse sera rejetée et renverra une erreur. Par conséquent, vous devez détecter une erreur et vous pouvez vérifier de quel kind d’erreur il s’agissait.
Lors du chargement de ressources volumineuses, les indicateurs de development sont très utiles pour les utilisateurs ayant une vitesse Web lente. Dans les indicateurs de progrès précédemment mis en place. développeurs utilisés XMLHttpRequest.onprogress en tant que gestionnaire de rappel.
Aller chercher
Pour suivre la development du téléchargement dans fetch()vous pouvez utiliser l’un des response.physique propriétés, une ReadableStream objet. Il fournit des données corporelles morceau par morceau et vous permet de compter la quantité de données consommées dans le temps.
L’exemple ci-dessus montre l’utilisation de ReadableStream pour fournir aux utilisateurs un retour instantané lors du téléchargement d’photos.
Axios
Dans Axios, la mise en œuvre d’un indicateur de development est également attainable, et c’est encore plus facile automotive il existe un module prêt qui peut être installé et mis en œuvre. C’est appelé Barre de development Axios.
Aller chercher
Dans fetch()vous ne pouvez pas surveiller la development de vos téléchargements.
Axios
Dans Axios, vous pouvez surveiller la development de vos téléchargements. Cela pourrait être un facteur décisif si vous développez une utility pour le téléchargement de vidéos ou de pictures.
L’interception peut être importante pour vous lorsque vous devez vérifier ou modifier votre requête HTTP de l’utility au serveur ou inversement – par exemple, authentification, journalisation, and so forth.
Aller chercher
Fetch() ne fournit pas l’interception HTTP par défaut. Il est attainable d’écraser le fetch() méthode et définir ce qui doit se passer lors de l’envoi de la requête, mais cela prendra plus de code et peut être plus compliqué que d’utiliser les fonctionnalités d’Axios. Vous pouvez écraser le world fetch() méthode et définissez votre propre intercepteur, comme le code suivant :
Axios
L’interception HTTP Axios est l’une des fonctionnalités clés de cette bibliothèque – c’est pourquoi vous n’avez pas besoin de créer de code supplémentaire pour l’utiliser.
Dans le code ci-dessus, le axios.interceptors.request.use() et axios.interceptors.response.use() Les méthodes sont utilisées pour définir le code à exécuter avant l’envoi d’une requête HTTP.
Aller chercher
Fetch() fournit la fonctionnalité de délai d’attente de réponse through le AbortController interface.
Dans le code ci-dessus, en utilisant le AbortController.AbortController() constructeur, vous devez créer un AbortController objet. Le AbortController L’objet vous permet d’abandonner ultérieurement la demande. Comme je l’ai mentionné dans mon article précédent, « Informations approfondies sur l’API Fetch de JavaScript», nous avons discuté de la façon dont sign est une propriété de AbortControllerqui est en lecture seule. sign fournit un moyen de communiquer avec une demande ou d’abandonner la demande. Si le serveur ne répond pas en moins de cinq secondes, l’opération se termine en appelant controller.abort().
Axios
En utilisant la propriété facultative timeout dans l’objet de configuration, vous pouvez définir le nombre de millisecondes avant que la demande ne soit terminée.
L’une des raisons pour lesquelles les développeurs JavaScript choisissent Axios plutôt que fetch() est la facilité de réglage du délai d’attente.
Aller chercher
Pour faire plusieurs requêtes simultanées, vous pouvez utiliser la fonction intégrée Promise.all() méthode. Passez simplement un tableau de fetch() demande à Promise.all() puis un async fonction pour gérer la réponse.
Axios
Vous pouvez obtenir le résultat ci-dessus en utilisant le axios.all() méthode fournie par Axios. Transmettez toutes les demandes de récupération sous forme de tableau au axios.all() méthode. Attribuez les propriétés du tableau de réponse à des variables distinctes à l’aide de la axios.unfold() fonction, comme ceci :
La rétrocompatibilité est également connue sous le nom de prise en cost du navigateur.
Aller chercher
Fetch() ne prend en cost que Chrome 42+, Safari 10.1+, Firefox 39+ et Edge 14+. Le tableau suitable complet est disponible sur « Puis-je utiliser? » Afin d’implémenter des fonctionnalités similaires à fetch() sur les navigateurs Internet qui ne prennent pas en cost Fetch()vous pouvez utiliser fetch() avec un polyfill comme home windows.fetch ().
Pour utiliser le fetch polyfill, installez-le through cette commande npm :
npm set up whatwg-fetch --save
Si vous avez besoin d’accéder à l’implémentation polyfill pour une raison quelconque, elle est disponible through les exportations :
Gardez à l’esprit que vous pourriez également avoir besoin d’un polyfill de promesse dans certains anciens navigateurs.
Axios
Axios n’est pas comme fetch(). Axios offre une giant prise en cost des navigateurs. Même les navigateurs plus anciens comme IE11 peuvent exécuter Axios sans problème. Le tableau de compatibilité complet est disponible through Axios’s Documentation.
Pour la plupart de vos besoins de communication HTTP, Axios fournit une API facile à utiliser dans un bundle compact.
Il existe des bibliothèques alternate options pour la communication HTTP, telles que kyun petit et élégant shopper HTTP basé sur window.fetch ; super-agentune petite bibliothèque de requêtes HTTP progressive côté shopper basée sur XMLHttpRequest.
Mais Axios est une meilleure resolution pour les functions avec beaucoup de requêtes HTTP et pour celles qui ont besoin d’une bonne gestion des erreurs ou d’interceptions HTTP.
Dans le cas de petits projets avec seulement quelques appels d’API simples, fetch() peut être une bonne resolution.
