Salut ! Si vous êtes développeur, vous avez probablement déjà eu ces moments où vous devez effectuer plusieurs appels d'API dans vos projets. Ce n'est pas la partie la plus glamour du codage, mais c'est essentiel. Aujourd'hui, nous allons plonger en profondeur dans les requêtes multiples Axios, un moyen puissant de gérer cette tâche efficacement.
Mais attendez, avant de commencer, voici une astuce rapide : si vous recherchez un outil d'API puissant pour rationaliser votre processus de développement, consultez Apidog. Il est gratuit et regorge de fonctionnalités qui vous faciliteront grandement la vie.
Maintenant, retroussons nos manches et plongeons dans les détails de la réalisation de plusieurs requêtes avec Axios !
Qu'est-ce qu'Axios ?
Tout d'abord, parlons de ce qu'est Axios. Axios est un client HTTP populaire basé sur les promesses pour JavaScript. Il est utilisé pour effectuer des requêtes HTTP à partir du navigateur et de Node.js, et il est particulièrement apprécié pour sa facilité d'utilisation et sa flexibilité. Avec Axios, vous pouvez facilement envoyer des requêtes HTTP asynchrones aux points de terminaison REST et effectuer des opérations CRUD.
Pourquoi utiliser Axios pour plusieurs requêtes ?
Lors de la création d'applications web modernes, il existe souvent des scénarios où vous devez récupérer des données à partir de plusieurs sources. Cela peut être pour remplir un tableau de bord avec différents ensembles de données, effectuer une série d'opérations dépendantes, ou même simplement rassembler toutes les informations nécessaires pour afficher une seule page.
La gestion de plusieurs requêtes API peut être délicate. Vous devez gérer plusieurs opérations asynchrones, gérer les erreurs avec élégance et vous assurer que votre application ne soit pas ralentie. C'est là qu'Axios brille. Il offre un moyen élégant et simple de gérer plusieurs requêtes avec des fonctionnalités telles que :
- API basée sur les promesses : Facilite la gestion des requêtes asynchrones.
- Prise en charge intégrée des requêtes simultanées : Utilisation de
axios.alletaxios.spread. - Intercepteurs : Pour gérer les transformations des requêtes et des réponses.
- Gestion des erreurs : Simplifie la gestion des différents types d'erreurs.
Démarrer avec Axios
Avant de plonger dans les requêtes multiples, assurons-nous que nous sommes sur la même longueur d'onde avec les bases d'Axios.
Installation d'Axios
Tout d'abord, vous devez installer Axios. Si vous utilisez npm, vous pouvez le faire avec :
npm install axios
Ou, si vous préférez yarn :
yarn add axios
Requête Axios de base
Voici un exemple rapide d'une requête GET de base utilisant Axios :
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
Ce simple extrait récupère les données de l'URL donnée et les enregistre dans la console. En cas d'erreur, il enregistre le message d'erreur.
Effectuer plusieurs requêtes avec Axios
Maintenant, passons au sujet principal : effectuer plusieurs requêtes avec Axios. Il existe plusieurs façons de gérer cela, en fonction de vos besoins.
Utilisation de axios.all et axios.spread
La méthode la plus courante pour gérer plusieurs requêtes consiste à utiliser axios.all et axios.spread. Ces fonctions vous aident à gérer les requêtes simultanées et à traiter leurs réponses de manière propre et organisée.
Voici un exemple :
import axios from 'axios';
function getData() {
const requestOne = axios.get('https://api.example.com/data1');
const requestTwo = axios.get('https://api.example.com/data2');
axios.all([requestOne, requestTwo])
.then(axios.spread((responseOne, responseTwo) => {
console.log('Data from first request:', responseOne.data);
console.log('Data from second request:', responseTwo.data);
}))
.catch(errors => {
console.error('Error fetching data:', errors);
});
}
getData();
Dans cet exemple, axios.all prend un tableau de promesses (nos requêtes HTTP) et attend que toutes se résolvent. La fonction axios.spread prend ensuite les réponses et les répartit en arguments individuels, ce qui facilite le travail avec chaque réponse.
Gestion des requêtes dynamiques
Parfois, vous ne savez pas à l'avance combien de requêtes vous devrez effectuer. Dans de tels cas, vous pouvez créer dynamiquement le tableau de promesses.
import axios from 'axios';
function fetchData(endpoints) {
const requests = endpoints.map(endpoint => axios.get(endpoint));
axios.all(requests)
.then(axios.spread((...responses) => {
responses.forEach((response, index) => {
console.log(`Data from request ${index + 1}:`, response.data);
});
}))
.catch(errors => {
console.error('Error fetching data:', errors);
});
}
const apiEndpoints = [
'https://api.example.com/data1',
'https://api.example.com/data2',
'https://api.example.com/data3'
];
fetchData(apiEndpoints);
Dans ce scénario, nous mappons sur le tableau des points de terminaison pour créer un tableau de promesses. C'est un moyen puissant de gérer des listes dynamiques d'appels d'API.
Requêtes séquentielles avec Axios
Il y a des moments où vous devez vous assurer qu'une requête se termine avant de commencer la suivante. Par exemple, lorsque la deuxième requête dépend du résultat de la première. Dans de tels cas, vous pouvez enchaîner vos requêtes à l'aide de promesses.
import axios from 'axios';
function fetchSequentialData() {
axios.get('https://api.example.com/data1')
.then(response1 => {
console.log('First request data:', response1.data);
return axios.get('https://api.example.com/data2');
})
.then(response2 => {
console.log('Second request data:', response2.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
fetchSequentialData();
Cette approche garantit que la deuxième requête ne démarre qu'une fois que la première s'est terminée avec succès.
Gestion des erreurs dans plusieurs requêtes
La gestion efficace des erreurs est cruciale lors de la gestion de plusieurs requêtes. Axios offre plusieurs façons de gérer les erreurs, garantissant que votre application peut gérer les problèmes avec élégance.
Gestion des erreurs pour les requêtes individuelles
Vous pouvez gérer les erreurs pour chaque requête individuellement en ajoutant un bloc .catch à chaque promesse :
import axios from 'axios';
const requestOne = axios.get('https://api.example.com/data1')
.catch(error => console.error('Error in request one:', error));
const requestTwo = axios.get('https://api.example.com/data2')
.catch(error => console.error('Error in request two:', error));
axios.all([requestOne, requestTwo])
.then(axios.spread((responseOne, responseTwo) => {
if (responseOne) console.log('Data from first request:', responseOne.data);
if (responseTwo) console.log('Data from second request:', responseTwo.data);
}));
Gestion de toutes les erreurs ensemble
Alternativement, vous pouvez gérer toutes les erreurs ensemble à la fin :
import axios from 'axios';
const requestOne = axios.get('https://api.example.com/data1');
const requestTwo = axios.get('https://api.example.com/data2');
axios.all([requestOne, requestTwo])
.then(axios.spread((responseOne, responseTwo) => {
console.log('Data from first request:', responseOne.data);
console.log('Data from second request:', responseTwo.data);
}))
.catch(error => {
console.error('Error fetching data:', error);
});
Cette approche est plus simple mais moins granulaire, car elle ne distingue pas quelle requête a échoué.
Optimisation des requêtes Axios
Pour tirer le meilleur parti d'Axios, voici quelques conseils et bonnes pratiques.
Utilisation des intercepteurs
Les intercepteurs vous permettent d'exécuter votre code ou de modifier les requêtes/réponses avant qu'elles ne soient gérées par then ou catch. Ils sont parfaits pour ajouter des en-têtes, la journalisation, la gestion des erreurs, etc.
import axios from 'axios';
// Add a request interceptor
axios.interceptors.request.use(request => {
console.log('Starting Request', request);
return request;
}, error => {
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(response => {
console.log('Response:', response);
return response;
}, error => {
return Promise.reject(error);
});
Définition des valeurs par défaut globales
Vous pouvez définir des options de configuration par défaut pour Axios. Cela peut être pratique pour définir des URL de base, des en-têtes, des délais d'attente, etc.
import axios from 'axios';
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;
Annulation des requêtes
Parfois, vous devrez peut-être annuler une requête. Axios offre un moyen d'annuler les requêtes à l'aide de CancelToken.
import axios from 'axios';
const CancelToken = axios.CancelToken;
let cancel;
axios.get('https://api.example.com/data', {
cancelToken: new CancelToken(function executor(c) {
cancel = c;
})
})
.then(response => {
console.log(response.data);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
console.error('Error fetching data:', thrown);
}
});
// To cancel the request
cancel('Operation canceled by the user.');
Exemple concret : récupération de données à partir de plusieurs API
Regroupons le tout avec un exemple concret. Supposons que vous construisiez un tableau de bord qui doit récupérer les données des utilisateurs, des publications et des commentaires à partir de différents points de terminaison.
import axios from 'axios';
async function fetchDashboardData() {
try {
const [userData, postsData, commentsData] = await axios.all([
axios.get('https://api.example.com/users'),
axios.get('https://api.example.com/posts'),
axios.get('https://api.example.com/comments')
]);
console.log
('User Data:', userData.data);
console.log('Posts Data:', postsData.data);
console.log('Comments Data:', commentsData.data);
} catch (errors) {
console.error('Error fetching dashboard data:', errors);
}
}
fetchDashboardData();
Dans cet exemple, nous utilisons axios.all pour récupérer les données de trois points de terminaison différents simultanément. Nous traitons ensuite les réponses ensemble, en enregistrant les données dans la console.
Apidog : un outil gratuit pour générer votre code Axios
Apidog est une plateforme de développement d'API collaborative tout-en-un qui fournit une boîte à outils complète pour la conception, le débogage, le test, la publication et la simulation d'API. Apidog vous permet de créer automatiquement du code Axios pour effectuer des requêtes HTTP.
Voici le processus d'utilisation d'Apidog pour générer du code Axios :
Étape 1 : Ouvrez Apidog et sélectionnez nouvelle requête
Étape 2 : Entrez l'URL du point de terminaison de l'API auquel vous souhaitez envoyer une requête,insérez tous les en-têtes ou paramètres de chaîne de requête que vous souhaitez inclure avec la requête, puis cliquez sur "Conception" pour passer à l'interface de conception d'Apidog.
Étape 3 : Sélectionnez "Générer le code client" pour générer votre code.
Étape 4 : Copiez le code Axios généré et collez-le dans votre projet.
Utilisation d'Apidog pour envoyer des requêtes HTTP
Apidog propose plusieurs fonctionnalités avancées qui améliorent encore sa capacité à tester les requêtes HTTP. Ces fonctionnalités vous permettent de personnaliser vos requêtes et de gérer des scénarios plus complexes sans effort.
Étape 1 : Ouvrez Apidog et créez une nouvelle requête.
Étape 2 : Trouvez ou saisissez manuellement les détails de l'API pour la requête POST que vous souhaitez effectuer.
Étape 3 : Remplissez les paramètres requis et toutes les données que vous souhaitez inclure dans le corps de la requête.
Conclusion
La gestion efficace de plusieurs requêtes API est cruciale pour la création d'applications web robustes et performantes. Axios, avec ses fonctionnalités puissantes et sa flexibilité, rend cette tâche simple et gérable. En tirant parti de axios.all, axios.spread, des intercepteurs et d'autres fonctionnalités avancées, vous pouvez créer des flux de travail de récupération de données transparents et efficaces dans vos applications.
N'oubliez pas, si vous souhaitez booster votre développement d'API, téléchargez Apidog gratuitement et explorez son riche ensemble de fonctionnalités. C'est un véritable atout pour tout développeur travaillant avec des API.
