Heim > Web-Frontend > js-Tutorial > Hauptteil

So vereinheitlichen Sie die Schnittstellenverwaltung von Vue und Axios

不言
Freigeben: 2018-07-23 14:59:25
Original
2402 Leute haben es durchsucht

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;
Nach dem Login kopieren

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);
Nach dem Login kopieren

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";
Nach dem Login kopieren

Rufen Sie eine Schnittstelle in Aktion auf:

const { data } = await GlobalService.userLogin(payload);
Nach dem Login kopieren

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。
Nach dem Login kopieren

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;
});
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage