Comment unifier la gestion des interfaces de Vue et axios

Il est très simple de demander l'interface via axios. Si la requête axios est encapsulée, l'API peut être configurée comme méthode à un seul endroit, et cette méthode peut être appelée directement lors de son utilisation. Il n’est alors pas nécessaire de se donner trop de peine.

Mais nous n'avons pas besoin de définir chaque interface comme une méthode de requête axios de longue haleine Puisque nous voulons garder les choses simples, essayez de terminer une configuration simple en un seul endroit.

1. Configurez l'interface API

Placez les interfaces du même module sous un seul fichier. Par exemple, j'ai défini un global.js sous services dans src comme configuration globale du service. L'API configurée peut être utilisée comme méthode de ce service.

Par exemple :

Le champ de nom sera utilisé comme nom de méthode à appeler plus tard, mais ce n'est qu'un simple objet. Maintenant, nous définissons. la méthode pour le convertir en méthode.

2. Convertir l'objet tableau de la configuration de l'interface en méthode

import axios from "axios";

const withAxios = apiConfig => {
  const serviceMap = {};
  apiConfig.map(({ name, url, method }) => {
    serviceMap[name] = async function(data = {}) {
      let key = "params";      if (method === "post" || method === "put") {
        key = "data";
      }      return axios({
        method,
        url: "/api" + url,
        [key]: data
      });
    };
  });  return serviceMap;
};

export default withAxios;

Nous avons défini une méthode générale avec Axios sous utils La fonction de cette méthode est de convertir le fichier de configuration de l'API. dans une méthode contenant la méthode d’un objet.

3. Utilisez withAxios

import withAxios from "../utils/withAxios";

const apiConfig = [
  {
    name: "userLogin",
    url: "/login",
    method: "get"
  },
  {
    name: "getUserInfo",
    url: "/login/user",
    method: "get"
  },
  {
    name: "getDeptList",
    url: "/login/department",
    method: "get"
  }
];

export default withAxios(apiConfig);

dans le fichier de configuration de l'API pour exporter directement l'objet empaqueté.

4. Utilisez

dans vuex. Si vous souhaitez appeler une API dans vuex, importez d'abord l'objet qui vient d'être exporté

import GlobalService from "@/services/global";

et appelez une interface en action :

const { data } = await GlobalService.userLogin(payload);

C'est tout. Après cela, seules les deux étapes de configuration et d'invocation sont nécessaires pour terminer l'appel d'interface, et la sémantique de l'interface est également plus claire.

5. Autres configurations d'axios

Nous pouvons effectuer quelques réglages courants pour axios dans withAxios of utils.

Par exemple, l'authentification est automatiquement incluse dans chaque en-tête de requête :

axios.defaults.headers.common["Authorization"] = getCookie("jwt") || "";// 注意：此处只会在web应用初始化时配置，在登录成功后需重新配置Authorization。

Par exemple, utiliser un intercepteur pour traiter uniformément les objets renvoyés :

axios.interceptors.response.use(response => {
  const { data } = response;  if (data.status === -2) {
    Vue.prototype.$Message.error(`无效的登录信息或登录已失效，请重新登录`);
    delCookie("jwt");
    router.push({ path: "/login" });
  }  if (data.status === -1) {
    Vue.prototype.$Message.error(`发生错误[${data.message}]`);
  }  return response;
});

recommandations :

Comment gérer le délai d'expiration de la demande de vue axios

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!