So vereinheitlichen Sie die Schnittstellenverwaltung von Vue und Axios

Es ist sehr einfach, die Schnittstelle über Axios anzufordern. Wenn die Axios-Anfrage gekapselt ist, kann die API nur an einer Stelle als Methode konfiguriert werden, und diese Methode kann bei Verwendung direkt aufgerufen werden. Dann besteht kein Grund, sich allzu viel Mühe zu geben.

Aber wir müssen nicht jede Schnittstelle als langwierige Axios-Anfragemethode definieren. Da wir es einfach halten möchten, versuchen Sie, die einfache Konfiguration an einem Ort durchzuführen.

1. Konfigurieren Sie die API-Schnittstelle

Fügen Sie darin die Schnittstellen desselben Moduls unter „Dienste“ in src als globale Dienstkonfiguration ein Die konfigurierte API kann als Methode dieses Dienstes verwendet werden.

Zum Beispiel:

Das Namensfeld wird als später aufzurufender Methodenname verwendet, aber dies ist nur ein einfaches Objekt. Jetzt definieren wir die Methode, um es in eine Methode umzuwandeln.

2. Konvertieren Sie das Array-Objekt der Schnittstellenkonfiguration in eine Methode

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;

Wir haben unter utils eine allgemeine Methode mit Axios definiert. Die Funktion dieser Methode besteht darin, die API-Konfigurationsdatei in eine zu konvertieren Methode, die Methoden eines Objekts enthält.

3. Verwenden Sie 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);

in der API-Konfigurationsdatei, um das gepackte Objekt direkt zu exportieren.

4. Verwendung in vuex

Wenn Sie eine API in vuex aufrufen möchten, importieren Sie zuerst das gerade exportierte Objekt

import GlobalService from "@/services/global";

Rufen Sie eine Schnittstelle in Aktion auf:

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

Das ist es. Danach sind nur noch die beiden Schritte Konfiguration und Aufruf erforderlich, um den Schnittstellenaufruf abzuschließen, und auch die Semantik der Schnittstelle ist klarer.

5. Andere Konfigurationen von Axios

Wir können einige allgemeine Einstellungen für Axios in withAxios of utils vornehmen.

Zum Beispiel ist die Authentifizierung automatisch in jedem Anforderungsheader enthalten:

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

Zum Beispiel die Verwendung eines Interceptors zur einheitlichen Verarbeitung der zurückgegebenen Objekte:

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;
});

Verwandte Empfehlungen:

So gehen Sie mit dem Timeout der Vue-Axios-Anfrage um

Das obige ist der detaillierte Inhalt vonSo vereinheitlichen Sie die Schnittstellenverwaltung von Vue und Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!