Axios est une bibliothèque JavaScript de gestion des requêtes HTTP, offrant des fonctionnalités pouvant améliorer vos projets de développement.
Axios, une bibliothèque JavaScript pour les requêtes HTTP, vous permet de définir facilement des intercepteurs pour automatiser des tâches spécifiques. Axios dispose d’une gamme de fonctionnalités qui peuvent améliorer considérablement les projets de développement. Cependant, certains développeurs ne connaissent pas ces fonctionnalités, car les méthodes les plus couramment utilisées les éclipsent souvent. La plupart de ces fonctionnalités contiennent peu ou pas d’informations, je crée donc un article pour expliquer ces fonctionnalités.
Cet article vise à faire la lumière sur ces fonctionnalités avancées d’Axios, en expliquant ce qu’elles sont, comment elles fonctionnent et quand les utiliser. Grâce à ces connaissances, vous pouvez utiliser ces fonctionnalités en toute confiance dans votre développement ultérieur en cas de besoin.
Instance personnalisée
L’instance personnalisée implique la création d’un nouveau fichier et l’importation d’Axios au lieu d’utiliser la valeur par défaut. Vous pouvez employer axios.create puis transmettez les objets, permettant la création de plusieurs instances Axios, chacune avec son ensemble unique de configurations par défaut telles que les URL de base, le délai d’attente et les en-têtes.
const createNewInstance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
'X-Custom-Header': 'value',
}
});
customAxios.get('/api/data')
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
console.error('Error:', error);
});
Cette fonctionnalité est nécessaire lorsque votre application doit interagir avec plusieurs API, chacune nécessitant son ensemble distinct d’options de requête. Par exemple, si vous avez l’intention de créer deux instances Axios, demandez à la première de récupérer des données spécifiques et à la seconde de récupérer des données différentes, avec des délais d’attente individuels définis respectivement à 2 000 ms et 5 000 ms.
Intercepteurs
Les intercepteurs jouent un rôle crucial dans la bibliothèque Axios, car ce sont des méthodes exécutées à la fois avant l’envoi d’une requête et après la réception d’une réponse. Ces méthodes sont déterminantes pour effectuer des tâches essentielles comme la modification des en-têtes, la transformation des données ou la gestion globale des erreurs.
Axios comprend deux types d’intercepteurs : Request et Response. L’intercepteur de requêtes est invoqué avant l’appel réel au point de terminaison, permettant des ajustements à la configuration de la requête. D’un autre côté, l’intercepteur de réponse est déclenché avant que la promesse ne soit remplie, garantissant que des modifications peuvent être apportées avant que le rappel ne reçoive les données.
Intercepteur de requête :
customAxios.interceptors.request.use(config => {
console.log('Request Interceptor:', config);
return config;
}, error => {
return Promise.reject(error);
});
Intercepteur de réponse :
customAxios.interceptors.response.use(response => {
console.log('Response Interceptor:', response);
return response;
}, error => {
return Promise.reject(error);
});
Les intercepteurs s’avèrent bénéfiques dans le contexte des appels API, dans le but d’appliquer la logique avant ou après l’exécution de l’appel API. Certains cas d’utilisation notables incluent :
- Journalisation des demandes et des réponses à des fins de débogage.
- Ajout d’en-têtes globaux ou application d’en-têtes d’autorisation à toutes les demandes.
- Implémentation d’une gestion globale des erreurs pour toutes les requêtes.
- Affichage des indicateurs de chargement lors des requêtes API.
- Implémentation de l’annulation de la demande, en particulier dans des scénarios tels que quitter une page.
Demande d’annulation
Version antérieure v0.22.0, l’annulation des demandes avec Axios n’était pas directement prise en charge. Axios propose deux méthodes pour annuler les demandes : cancelToken et signal(AbortController). Tandis que le cancelToken est obsolète, la méthode d’annulation recommandée consiste à utiliser le signal(AbortController). Le AbortController est un objet contrôleur JavaScript qui vous permet d’abandonner les requêtes Web selon vos besoins, et il est pris en charge par tous les navigateurs et autres clients HTTP.
Voici un exemple de la façon dont vous pouvez annuler une demande avec CancelToken :
const cancelTokenSource = axios.CancelToken.source();
customAxios.get('/api/data', {
cancelToken: cancelTokenSource.token
})
.then(response => {
console.log('Response:', response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error:', error);
}
});
cancelTokenSource.cancel('Request canceled by the user');
Voici un exemple de la façon dont vous pouvez annuler une demande avec le AbortController:
const controller = new AbortController();
axios.get('/foo/bar', { signal: controller.signal })
.then(response => {
// Handle the response
console.log('Response:', response.data);
})
.catch(error => {
if (error.name === 'AbortError') {
// Handle cancellation
console.log('Request was canceled:', error.message);
} else {
// Handle other errors
console.error('Error:', error);
}
});
// This function will cancel the request
controller.abort();
L’annulation des requêtes est nécessaire pour gérer et contrôler les cycles de vie des tâches asynchrones, en particulier lorsque vous travaillez avec des composants.
URLSearchParams
URLSearchParams est utilisé pour travailler avec les paramètres de requête dans une URL. Cela s’avère utile lorsque vous devez manipuler ou extraire des informations des paramètres de requête d’une URL. Par exemple, vous pouvez utiliser URLSearchParams pour inclure des paramètres de requête dans une requête API Fetch, préparer les données de formulaire à envoyer dans une requête POST, ou mettre à jour et ajouter de nouveaux paramètres de requête à une URL existante, comme le montre le code ci-dessous :
const url = new URL('https://example.com/api/data?key1=value1&key2=value2');
url.searchParams.set('key1', 'new_value1');
url.searchParams.append('key3', 'value3');
console.log(url.toString());
Un objet URL est créé dans l’extrait de code ci-dessus, représentant une URL avec les paramètres de requête initiaux. La valeur d’un paramètre existant key1 est alors mis à jour, et un nouveau paramètre key3 est ajouté. Impression de l’URL modifiée à l’aide de console.log donnera le résultat suivant pour l’URL mise à jour :
'https://example.com/api/data?key1=new_value1&key2=value2&key3=value3'
Défenses contre les attaques XSRF
Axios intègre un mécanisme intégré pour les en-têtes XSRF, renforçant les défenses contre Contrefaçon de demande intersite (XSRF) attaques. Grâce aux jetons XSRF, ces valeurs imprévisibles et uniques sont générées par l’application et transmises au client. Inclus dans les requêtes HTTP, ces jetons sont soumis à une vérification du serveur pour confirmer la légitimité de la requête, bloquant ainsi les actions non autorisées. La mise en œuvre du jeton XSRF dans Axios protège mieux contre les attaques et améliore la sécurité de votre application.
Vous pouvez facilement implémenter les fonctionnalités de protection XSRF lorsque :
- Création d’une application Web qui implique l’authentification et l’interaction des utilisateurs.
- Configuration d’en-têtes XSRF spécifiques pour une sécurité renforcée.
- Consommer une API qui impose une protection XSRF pour des interactions sécurisées.
Conclusion
Axios est une bibliothèque JavaScript pratique pour gérer les requêtes HTTP, offrant des fonctionnalités qui peuvent améliorer vos projets de développement. Cet article a expliqué ces fonctionnalités en expliquant clairement ce qu’elles sont, comment elles fonctionnent et quand les appliquer. Grâce à cette compréhension, vous pouvez facilement intégrer ces fonctionnalités dans votre travail de développement en cas de besoin.
Source link