Comment utiliser Axios pour implémenter des requêtes asynchrones et des interactions de données sous Vue ?

Vue est un framework JavaScript largement utilisé qui prend en charge de nombreuses bibliothèques et plugins populaires, dont Axios. Axios est une bibliothèque HTTP basée sur Promise qui permet des requêtes asynchrones et une interaction de données dans les applications Vue.

Dans cet article, nous apprendrons comment utiliser Axios pour implémenter des requêtes asynchrones et une interaction de données dans les applications Vue. Plus précisément, nous examinerons les bases d'Axios, notamment comment l'utiliser dans un composant Vue, comment configurer la configuration par défaut d'Axios et expliquerons comment utiliser les intercepteurs Axios et la gestion des erreurs.

Préparation

Avant d'utiliser Axios, nous devons l'installer dans notre application Vue. Installer Axios est très simple, il suffit d'exécuter la commande suivante dans le terminal :

npm install axios

Après avoir installé Axios, nous pouvons l'utiliser dans le composant Vue. Nous devons importer la bibliothèque Axios dans le composant Vue et créer une instance Axios en utilisant le code suivant :

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

baseURL est l'URL racine de l'API à laquelle nous accéderons.

Après avoir terminé l'installation et la configuration d'Axios, commençons à implémenter l'interaction de données de requête asynchrone.

Initier des requêtes asynchrones

Axios utilise des promesses pour gérer les requêtes asynchrones. Nous pouvons utiliser différentes méthodes de l'instance Axios pour envoyer différents types de requêtes, notamment GET, POST, PUT, DELETE, etc. Ne vous inquiétez pas pour cela, j'expliquerai la mise en œuvre de chaque méthode en détail ci-dessous.

GET request

GET est la méthode la plus couramment utilisée dans Axios. Il est utilisé pour obtenir des ressources de l'API. Nous pouvons utiliser la méthode get de l'instance Axios pour lancer une requête GET. Par exemple :

axiosInstance.get('/users')
  .then(response => console.log(response.data));

Cette requête utilisera la configuration Axios par défaut et enverra une requête GET depuis https://api.example.com/users. En cas de succès, nous verrons les données de réponse dans la console.

Demande POST

La requête POST est souvent utilisée pour envoyer des données à l'API, telles que la connexion de l'utilisateur, l'enregistrement ou la fourniture de données. Vous pouvez utiliser la méthode post de l'instance Axios pour lancer une requête POST. Par exemple :

axiosInstance.post('/login', {
  username: 'JohnDoe',
  password: 'secret'
})
.then(response => console.log(response.data));

enverra une requête POST à ​​https://api.example.com/login avec un objet contenant le nom d'utilisateur et le mot de passe comme paramètres. En cas de succès, nous verrons les données de réponse dans la console.

Demande PUT

La requête PUT est souvent utilisée pour mettre à jour les ressources existantes. Vous pouvez utiliser la méthode put de l'instance Axios pour lancer une requête PUT. Par exemple :

axiosInstance.put('/users/1', {
  name: 'John Doe'
})
.then(response => console.log(response.data));

enverra une requête PUT à https://api.example.com/users/1 avec un objet contenant des données mises à jour en paramètre. En cas de succès, nous verrons les données de réponse dans la console.

Demande DELETE

La requête DELETE est souvent utilisée pour supprimer des ressources. Vous pouvez utiliser la méthode delete de l'instance Axios pour lancer une requête DELETE. Par exemple :

axiosInstance.delete('/users/1')
.then(response => console.log(response.data));

enverra une demande DELETE à https://api.example.com/users/1. En cas de succès, nous verrons les données de réponse dans la console.

Il convient de noter que toutes les méthodes ci-dessus renvoient Axios Promise. Nous pouvons utiliser .then() ou .catch() pour gérer le succès et l'échec des requêtes asynchrones.

Configuration par défaut d'Axios

Lors de l'utilisation d'Axios dans une application Vue, nous pouvons gérer nos requêtes en créant une instance Axios et en effectuant une configuration. Voici quelques éléments de configuration courants d'Axios :

baseURL : l'URL racine de l'API
timeout : le délai d'expiration de la requête (millisecondes)
headers : les en-têtes par défaut de la requête
withCredentials : s'il faut envoyer des cookies
validateStatus : définir quel HTTP les codes d'état doivent être considérés comme un code d'état réussi

Nous pouvons utiliser la configuration au niveau du module Axios pour définir la configuration par défaut d'Axios, par exemple :

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 5000;

Dans cet exemple, l'instance Axios utilisera https://api.example. com comme URL racine de l’API et définissez le délai d’expiration de la demande par défaut sur 5 000 millisecondes.

Axios Interceptor

Axios Interceptor est une fonctionnalité puissante qui peut intercepter et modifier les données lors des requêtes et réponses Axios. Nous pouvons utiliser des intercepteurs pour injecter certains comportements par défaut, comme l'injection de l'en-tête Authorization avant de faire une requête.

Les intercepteurs Axios sont divisés en intercepteurs de requêtes et intercepteurs de réponses. L'intercepteur de requête gère le processus d'envoi de la requête, tandis que l'intercepteur de réponse gère les données renvoyées par le serveur.

Dans Axios, nous pouvons utiliser l'attribut interceptors pour définir les intercepteurs. Pour chaque requête et réponse, nous pouvons ajouter chaque intercepteur aux intercepteurs. Par exemple :

// 添加一个请求拦截器
axiosInstance.interceptors.request.use(config => {
    // 添加Authorization header
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
}, error => Promise.reject(error));

// 添加一个响应拦截器
axiosInstance.interceptors.response.use(response => {
    // 如果响应是一个重定向到登录页面，我们就清空localStorage
    if (response.status === 302 && response.headers.location === '/login') {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
    }
    return response;
}, error => Promise.reject(error));

Dans cet exemple, nous avons ajouté deux intercepteurs, un intercepteur de requête et un intercepteur de réponse. L'intercepteur de requête ajoutera l'en-tête Authorization avant l'envoi de chaque requête. L'intercepteur de réponse vérifiera si la réponse est redirigée vers la page de connexion et, si tel est le cas, nous effaçons le jeton d'accès local et les informations utilisateur.

Gestion des erreurs

Axios fournit quelques méthodes pour vérifier les erreurs. En principe, nous pouvons détecter les erreurs Axios dans .then() ou .catch(). Cependant, dans un environnement de production réel, nous avons besoin d’une meilleure gestion des erreurs. Les erreurs Axios peuvent être détectées et traitées à l'aide d'intercepteurs. Par exemple :

axiosInstance.interceptors.response.use(response => response, error => {
    // 处理错误
    if (error.response.status === 401) {
        // 如果响应状态码是401，我们就清空storage
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        // 跳转到登录界面
        router.push('/login');
    }
    return Promise.reject(error);
});

Dans cet exemple, nous ajoutons un intercepteur de réponse. Si le code d'état de la réponse est 401, nous effacerons le jeton et les informations utilisateur dans le stockage local et passerons à la page de connexion.

Conclusion

Vue est un puissant framework frontal qui utilise Axios pour implémenter des requêtes asynchrones vers les API et l'interaction des données dans les applications Vue. Axios est une bibliothèque HTTP facile à utiliser qui gère une variété de méthodes et d'intercepteurs HTTP pour gérer les erreurs asynchrones lors des requêtes et des réponses. Nous pouvons utiliser Axios pour connecter notre application Vue à l'API backend et améliorer notre application Vue avec des intercepteurs et une gestion des erreurs.

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!