Comment encapsuler l'intercepteur Vue3 Axios dans un fichier de requête

1. Créez un nouveau fichier nommé request.js et importez-le dans Axios :

import axios from 'axios';

2. Créez une fonction nommée request et exportez-la :

Créez une fonction nommée request et définissez-la comme une toute nouvelle instance Axios avec une base. URL. Pour définir un délai d'expiration dans une instance Axios encapsulée, transmettez l'option timeout lors de la création de l'instance Axios.

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超时设置为5秒
});

3. Ajoutez des intercepteurs dans la fonction de requête :

request.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

request.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

Cela ajoutera un intercepteur de requête et un intercepteur de réponse. Vous pouvez effectuer les actions requises dans ces intercepteurs, telles que l'ajout d'en-têtes d'authentification avant l'envoi de la demande ou la vérification des erreurs dans les données de réponse après le retour de la réponse.

4. Enfin, exportez la fonction de requête :

export default request;

Désormais, chaque requête réseau qui passe l'intercepteur prédéfini peut être exécutée via la fonction de requête de l'application. Par exemple :

import request from './request';

request.get('/users')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Cela fera une requête GET en utilisant une instance Axios encapsulée, puis gérera la réponse à l'aide d'un intercepteur prédéfini

Exemple complet :

Pour transporter le jeton et le nom d'utilisateur avant d'envoyer la requête, vous pouvez utiliser un intercepteur de requête pour tous La requête ajoute un en-tête d'authentification,

L'intercepteur de requête vérifie si les valeurs nommées "token" et "username" existent dans localStorage et les ajoute comme en-têtes Authorization et Username. Ajustez les noms et les valeurs de ces en-têtes selon vos besoins.

Pour opérer sur les données de réponse, utilisez des intercepteurs de réponse. Dans l'exemple ci-dessus, l'intercepteur de réponse vérifiera si l'attribut « statut » dans les données de réponse est « succès ». Sinon, traitez-la comme une erreur et lancez-la comme une exception. L'objet de réponse contient des informations sur les exceptions, notamment toutes les informations telles que les en-têtes de réponse, les codes d'état et les corps de réponse. La logique de ces vérifications et de ces levées d'exceptions peut être ajustée en fonction de la situation réelle.

import axios from 'axios';

export const request = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000, // 超时设置为5秒
});

request.interceptors.request.use(function (config) {
  // 在发送请求之前添加身份验证标头
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  config.headers.Username = localStorage.getItem('username');
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
request.interceptors.response.use(function (response) {
  // 对响应数据做些什么
  const responseData = response.data;
  if (responseData.status !== 'success') {
    const error = new Error(responseData.message || '请求失败');
    error.response = response;
    throw error;
  }
  return responseData.data;
}, function (error) {
  // 对响应错误做些什么
  return Promise.reject(error);
});

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!