Vue fügt einen Anforderungs-Interceptor und die Verwendung eines Vue-Ressourcen-Interceptors hinzu

In diesem Artikel wird hauptsächlich das Hinzufügen von Anforderungs-Interceptoren und die Verwendung von Vue-Ressourcen-Interceptoren vorgestellt

Phänomen

Einheitliche Verarbeitung von Fehlern und Konfigurationsanforderungsinformationen

2. Lösung

1. Axios installieren, Befehl: npm install axios --save-dev

2. Erstellen Sie eine neue Datei axios.js im Konfigurationsverzeichnis des Stammverzeichnisses. Der Inhalt lautet wie folgt:

import axios from 'axios'
// 配置默认的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club' 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

3 . Tun Sie es in main.js. Geben Sie einen Alias ​​($ajax) an, um ihn aufzurufen:

import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios

Wie in der Abbildung gezeigt:

4. Anwendung, ein Login-Beitrag wie:

this.$ajax({
　　method: 'post',
　　url: '/login',
　　data: {
　　　　'userName': 'xxx',
　　　　'password': 'xxx'
　　}
}).then(res => {
　　console.log(res)
})

ps: Werfen wir einen Blick auf die Verwendung von Vue-Resource Interceptor

Im Prozess der Verwendung von vue-resource im Vue-Projekt wurde vorübergehend eine Anforderung hinzugefügt, die das Hinzufügen einer Beurteilung des Token-Ablaufs in jeder HTTP-Anfrage auf einer beliebigen Seite erfordert abgelaufen ist, muss zur Anmeldeseite gesprungen werden. Wenn Sie der HTTP-Anforderungsoperation auf jeder Seite eine Beurteilung hinzufügen möchten, ist ein sehr großer Änderungsaufwand erforderlich. Verfügt vue-resource also über eine öffentliche Rückruffunktion, die jede Anfrageantwort erfasst? Die Antwort ist ja!

Die Interceptoren von vue-resource sind die perfekte Lösung für dieses Bedürfnis. Wenn der Interceptor nach jeder HTTP-Anforderungsantwort wie folgt eingestellt ist, wird zuerst die Interceptor-Funktion ausgeführt, um den Antworttext zu erhalten, und dann wird entschieden, ob die Antwort an

dann zum Empfang zurückgegeben werden soll. Dann können wir diesem Interceptor eine Beurteilung des Antwortstatuscodes hinzufügen, um zu entscheiden, ob wir zur Anmeldeseite springen oder auf der aktuellen Seite bleiben und weiterhin Daten abrufen möchten.

Der folgende Code wird zu main.js hinzugefügt

Vue.http.interceptors.push((request, next) => {
　console.log(this)//此处this为请求所在页面的Vue实例
 // modify request
 request.method = 'POST';//在请求之前可以进行一些预处理和配置
 // continue to next interceptor
　　next((response) => {//在响应之后传给then之前对response进行修改和逻辑判断。对于token时候已过期的判断，就添加在此处，页面中任何一次http请求都会先调用此处方法
 　　response.body = '...';
　　　　return response;
 });
});

Bevor ich diese Methode kannte, dachte ich an eine dumme Methode, aber sie kann es auch durchgeführt werden Reduzieren Sie den Änderungsaufwand bis zu einem gewissen Grad. Die Methode besteht darin, eine this.$$http.get-Methode anstelle der this.$http.get-Methode an Vue zu binden und der http-Anfrage jeder Seite ein $ vor $http hinzuzufügen.

rrree

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Bitte achten Sie auf PHP Chinesische Website!

Verwandte Empfehlungen:

So lösen Sie das Problem, dass die Vuex-Methode in der übergeordneten Komponente den Status aktualisiert und die untergeordnete Komponente nicht rechtzeitig aktualisiert und gerendert werden kann

in Einführung in die erste Verwendung der Stiftinstallationsmethode nach der Initialisierung, erstellt durch das Vue-Projekt

Das obige ist der detaillierte Inhalt vonVue fügt einen Anforderungs-Interceptor und die Verwendung eines Vue-Ressourcen-Interceptors hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!