Detaillierte Erklärung zur Verwendung des Vue-Interceptors vue-resource Interceptor

Der sogenannte Interceptor dient hauptsächlich dazu, Vue als Anforderungs-Interceptor und die Verwendung des Vue-Ressourcen-Interceptors vorzustellen. Ich hoffe, er kann allen helfen.

1. Phänomen

Einheitliche Verarbeitung von Fehlern und Konfigurationsanforderungsinformationen

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:

3. Referenzieren Sie sie und konfigurieren Sie einen Alias ​​( $ajax) zum Aufrufen von:

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

Wie in der Abbildung gezeigt:

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

4. Anwendung, ein angemeldeter Beitrag wie:

ps: Werfen wir einen Blick auf die Verwendung von vue-resource interceptor

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

Im Prozess der Verwendung von vue-resource im Vue-Projekt wurde vorübergehend eine Anforderung hinzugefügt, die eine Beurteilung des Token-Ablaufs in jedem http erfordert Anfrage auf einer beliebigen Seite. Wenn das Token abgelaufen ist, müssen Sie zur Anmeldeseite springen. 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

Bevor ich diese Methode kannte, dachte ich an eine dumme Methode, die aber auch den Änderungsaufwand bis zu einem gewissen Grad reduzieren kann. Die Methode besteht darin, eine this.$$http.get-Methode anstelle dieser.$http.get-Methode an Vue zu binden. Fügen Sie einfach ein $ vor $http für die HTTP-Anfrage jeder Seite hinzu.

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

Wie haben alle gelernt? Beeilen Sie sich und probieren Sie es aus.

// ajax.js
function plugin(Vue){
 Object.defineProperties(Vue.prototype,{
  $$http:{
   get(){
    return option(Vue);
   }
  }
 })
}
function option(Vue){
 let v = new Vue();
 return {
  get(a,b){
   let promise = new Promise(function(reslove,reject){
    v.$http.get(a,b).then((res)=>{
     reslove(res)
    },(err)=>{
　　　　　　　　　　　　//处理token过期问题。
    })
   })
   return promise;
  }
 }
}
module.exports=plugin;
//main.js
import ajax from './ajax.js'
Vue.use(ajax)

Verwandte Empfehlungen:

Ideen zur Implementierung verschiedener Interceptoren in PHP

Interceptor-Beispielcodeanalyse in PHP

Detaillierte Erläuterung des Seiten-Interceptors für die WeChat-Applet-Entwicklung

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung zur Verwendung des Vue-Interceptors vue-resource Interceptor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!