Points clés d'Axios
Axios est un client HTTP basé sur des promesses populaire avec une API facile à utiliser et peut être utilisé dans les environnements Node.js. Faire des demandes HTTP pour obtenir ou enregistrer des données est l'une des tâches les plus courantes pour les applications JavaScript client. Les bibliothèques tierces (en particulier jQuery) sont depuis longtemps un moyen populaire d'interagir avec les longues API du navigateur et d'éliminer les différences de croisement. Alors que les gens abandonnent progressivement JQuery et se tournent vers l'amélioration des API Dom natifs ou des bibliothèques d'interface utilisateur frontale telles que React et Vue.js, il devient sans signification pour l'inclure juste pour sa fonctionnalité $ .ajax. Voyons comment commencer avec Axios dans votre code et découvrez certaines fonctionnalités qui la rendent populaire parmi les développeurs JavaScript.
Comparaison de Axios vs Fetch
Vous savez peut-être déjà que les navigateurs modernes ont une API plus récente intégrée, alors pourquoi ne pas simplement l'utiliser? Il existe des différences entre les deux, ce qui, selon beaucoup, rend Axios plus avantageux. L'une des différences est la façon dont ces deux bibliothèques gèrent les codes d'erreur HTTP. Lorsque vous utilisez Fetch, si le serveur renvoie une erreur de série 4xx ou 5xx, votre rappel Catch () ne sera pas déclenché et le développeur doit vérifier le code d'état de réponse pour déterminer si la demande est réussie. D'un autre côté, si l'un de ces codes d'état est renvoyé, Axios rejettera la demande de promesse. Une autre petite différence qui confond souvent les développeurs qui sont nouveaux dans les API est que Fetch n'envoie pas automatiquement des cookies au serveur lors de la demande. Une option doit être transmise explicitement pour les inclure. Axios est là pour vous soutenir. Pour certains, une différence qui peut finir par être une barrière est la mise à jour des progrès du téléchargement / téléchargement. Étant donné qu'Axios est construit au-dessus des anciennes API XHR, vous pouvez enregistrer OnuploadProgress et OndownloadProgress Fonctions pour afficher le pourcentage d'achèvement dans l'interface utilisateur de l'application. Actuellement, Fetch ne prend pas en charge cette fonctionnalité. Enfin, Axios est disponible dans les navigateurs et Node.js. Cela permet de partager le code JavaScript entre le navigateur et le backend, ou d'effectuer le rendu côté serveur de l'application frontale. Remarque: Node a une version de l'API Fetch disponible, mais à mon avis, les autres fonctionnalités qu'Axios offre le rend plus avantageux.
Installation
Comme vous pouvez vous y attendre, la façon la plus courante d'installer Axios est via le gestionnaire de packages NPM:
npm i axios
et incluez-le dans votre code où vous en avez besoin:
// ES2015 风格导入
import axios from 'axios';
// Node.js 风格 require
const axios = require('axios');Si vous n'utilisez pas une sorte de bundler de module (comme WebPack), vous pouvez toujours extraire des bibliothèques de CDN de la manière traditionnelle:
<🎜>
Axios s'exécute dans tous les navigateurs Web modernes et Internet Explorer 8.
Envoyez une demande
Similaire à la fonction $ .ajax de jQuery, vous pouvez faire n'importe quel type de demande HTTP en passant un objet d'option à Axios:
axios({
method: 'post',
url: '/login',
data: {
user: 'brunos',
lastName: 'ilovenodejs'
}
});Ici, nous disons à Axios quelle méthode http que nous voulons utiliser (telle que get / post / delete, etc.) et quelle URL devrions-nous faire la demande. Nous fournissons également des données qui seront envoyées avec la demande sous la forme d'un objet JavaScript à paire de clés / valeur simple. Par défaut, Axios le sérialisera à JSON et l'envoie comme corps de demande.
Lorsque vous faites une demande, vous pouvez passer de nombreuses autres options, mais voici quelques-unes des options les plus courantes:
baseUrl: Si vous spécifiez une URL de base, elle sera attachée à toute URL relative que vous utilisez. headers: L'objet de paire de touches / valeur à envoyer en en-tête. params: L'objet de paire de touches / valeur qui sera sérialisé et annexé en tant que chaîne de requête à l'URL. responseType: Si le format de réponse que vous attendez n'est pas JSON, vous pouvez définir cette propriété sur arraybuffer, blob, document, text, stream, ou auth
get comme jQuery, il existe des raccourcis pour effectuer différents types de demandes. Les méthodes delete, head, options et
npm i axios
Les méthodes post put, patch et
// ES2015 风格导入
import axios from 'axios';
// Node.js 风格 require
const axios = require('axios');Recevoir la réponse
Une fois qu'une demande a été faite, Axios renvoie une promesse qui résoudra à un objet de réponse ou à un objet d'erreur.
<🎜>
then() Si la demande est réussie, votre rappel
data status statusText headers config request S'il y a un problème avec la demande, la promesse sera refusée et un objet d'erreur est affiché, qui contient au moins les propriétés suivantes:
message response request config convertir et intercepteur
$http Axios fournit des fonctionnalités simplistes inspirées de la bibliothèque
Axios vous permet de fournir des fonctions pour convertir des données de sortie ou d'entrée sous la forme de deux options de configuration que vous pouvez définir lors de la demande de demande: transformRequest et transformResponse. Les deux propriétés sont des tableaux qui vous permettent de relier plusieurs fonctions qui passeront des données. Toute fonction transmise à transformRequest sera appliquée aux demandes de pose, de publication et de correctif. Ils reçoivent des données de demande et des objets d'en-tête sous forme de paramètres et doivent renvoyer l'objet de données modifié.
npm i axios
peut ajouter des fonctions à transformResponse de la même manière, mais les appeler uniquement avant d'utiliser des données de réponse et de passer la réponse à tout rappel lié then(). Alors, à quoi pouvons-nous utiliser la conversion? Un cas d'utilisation potentiel consiste à traiter les API qui s'attendent à recevoir des données dans un format spécifique, telles que XML ou même CSV. Vous pouvez configurer une paire de conversions pour convertir la sortie et les données d'entrée en format requis par l'API et le convertir de ce format. Il convient de noter que les fonctions par défaut transformRequest et transformResponse d'Axios convertissent les données en JSON et en spécifiant que le vôtre remplacera ces transformations.
Bien que la conversion vous permette de modifier les données de sortie et d'entrée, Axios vous permet également d'ajouter des fonctions appelées intercepteurs. Comme la conversion, ces fonctions peuvent également être jointes à la demande ou licenciées lorsqu'une réponse est reçue.
// ES2015 风格导入
import axios from 'axios';
// Node.js 风格 require
const axios = require('axios');Comme vous l'avez peut-être remarqué à partir de l'exemple ci-dessus, il existe des différences importantes entre les intercepteurs et les conversions. Au lieu de simplement recevoir des données ou des en-têtes, un intercepteur reçoit une configuration de demande complète ou un objet de réponse. Lors de la création d'un intercepteur, vous pouvez également choisir de fournir une fonction de gestionnaire d'erreurs qui vous permet d'attraper toutes les erreurs et de les gérer de manière appropriée. Un intercepteur de demande peut être utilisé pour effectuer des opérations telles que la récupération d'un jeton dans un magasin local et l'envoyer avec toutes les demandes, tandis qu'un intercepteur de réponse peut être utilisé pour capturer une réponse 401 et la rediriger vers une page de connexion pour l'autorisation.
Les modules complémentaires tiers
En tant que bibliothèque populaire, Axios bénéficie d'un écosystème de bibliothèque tiers qui étend ses capacités. Des intercepteurs aux adaptateurs de test aux bûcherons, il existe de nombreux outils disponibles. Voici quelques outils que je pense que vous pourriez trouver utiles:
mock-adapter: vous permet de simuler facilement les demandes pour faciliter le code de test. cache-plugin: Un wrapper pour les demandes de gère de cache sélective. redux-axios-middleware: Si vous êtes un utilisateur Redux, ce middleware fournit un moyen propre de planifier les demandes AJAX en utilisant les anciennes opérations normales. Une liste de modules complémentaires et d'extensions supplémentaires est disponible dans le référentiel Axios GitHub. Dans l'ensemble, il y a beaucoup à recommander chez Axios. Il a une API simple et une manière pratique et rapide qui est familière à tous ceux qui ont déjà utilisé JQuery. Sa popularité et la disponibilité de divers modules complémentaires tiers en font une option fiable à inclure dans votre application, que ce soit à l'avant, à l'arrière ou aux deux.
Axios FAQ (FAQ)
Axios et API Fetch sont tous deux des outils de demande HTTP populaires. Cependant, il existe des différences clés entre les deux. Axios est un client HTTP basé sur des promesses qui fonctionne dans les navigateurs et les environnements Node.js. Il fournit une seule API pour gérer les interfaces HTTP pour XMLHTTPREQUESTS et les nœuds. D'un autre côté, l'API Fetch fournit une définition commune des objets de demande et de réponse, qui est également basé sur la promesse. Mais contrairement à Axios, l'API Fetch n'est pas basée sur XMLHttpRequest, c'est un module intégré pour JavaScript ES6.
Axios fournit une méthode puissante de gestion des erreurs. Lorsqu'une erreur se produit lors d'une demande AxiOS, elle est rejetée et un objet d'erreur s'affiche. L'objet d'erreur contient des informations sur la cause de l'erreur, telles que les messages d'erreur, les codes d'état HTTP et les objets de demande et de réponse. Vous pouvez assister à cette erreur à l'aide du bloc Try / Catch ou de la méthode de capture de la promesse.
Oui, Axios est disponible pour React. En fait, c'est un choix populaire pour faire des demandes HTTP dans les applications React. Vous pouvez utiliser Axios dans React pour obtenir des données de l'API et l'afficher dans votre composant. Les demandes AxiOS dans React peuvent être faites dans le crochet componentDidMount ou useEffect.
Axios fournit un mécanisme pour annuler les demandes. Cela peut être fait en utilisant la méthode d'usine CancelToken.source. Lorsque vous souhaitez annuler la demande, appelez simplement la méthode cancel sur l'objet source.
Il est facile de faire une demande de poste à l'aide d'Axios. Vous pouvez utiliser la méthode post de l'instance AxiOS et passer l'URL et les données comme paramètres. Les données doivent être un objet JavaScript représentant la charge utile demandée.
Oui, Axios est disponible pour vue.js. Il s'agit d'un choix populaire pour faire des demandes HTTP dans les applications Vue.js. Vous pouvez utiliser Axios dans Vue.js pour obtenir des données de l'API et l'afficher dans votre composant.
Axios vous permet de définir des en-têtes par défaut qui seront envoyés avec chaque demande. Cela peut être fait en utilisant la propriété defaults de l'instance AxiOS. Vous pouvez définir la propriété defaults de l'objet headers sur un objet JavaScript représentant l'en-tête.
Oui, Axios peut être utilisé dans les environnements Node.js. Il fournit une seule API pour gérer les interfaces HTTP pour XMLHTTPREQUESTS et les nœuds. Cela en fait un outil polyvalent pour faire des demandes HTTP dans JavaScript.
Lorsqu'une demande est faite à l'aide d'Axios, il renvoie une promesse analysée comme objet de réponse. Cet objet contient des données renvoyées du serveur, l'état de la demande, de l'en-tête et d'autres informations. Vous pouvez utiliser la méthode then de la promesse pour gérer cette réponse.
Oui, Axios vous permet de faire plusieurs demandes en même temps. Cela peut être fait en utilisant la méthode Axios 'all. Vous transmettez le tableau de promesse renvoyé par la demande Axios à la méthode all, qui renvoie une nouvelle promesse qui sera analysée lorsque toutes les demandes seront terminées.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment fermer le port 135 445
quelle est l'URL
Solution à javascript :;
La différence entre Unix et Linux
Comment gagner de l'argent avec la blockchain
Applications logicielles de spéculation monétaire formelles et faciles à utiliser recommandées en 2024
Tri des tableaux JS : méthode sort()
Le rôle de l'index
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
