Vue interceptor vue-resource Interceptor usage detailed explanation

The so-called interceptor is to intercept some files. This article mainly introduces the use of Vue adding request interceptor and vue-resource interceptor. Friends who need it can refer to it. I hope it can help everyone.

1. Phenomenon

Uniform processing of errors and configuration request information

2. Solution

1. Install axios, command: npm install axios --save -dev

2. Create a new file axios.js in the config directory of the root directory with the following content:

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. Reference it in main.js and configure an alias ($ajax ) to make the call:

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

As shown in the figure:

4. Application, a login post such as:

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

ps: Let’s take a look at the use of vue-resource interceptor

In the process of using vue-resource in the vue project, a requirement has been temporarily added, which requires adding judgment on token expiration in any http request on any page. If the token has expired, you need to jump to the login page. . If you want to add a judgment to the http request operation in each page, it will be a very large amount of modification work. So does vue-resource have a public callback function that captures any request response? The answer is yes!

vue-resource's interceptors interceptor is the perfect solution to this need. After each http request response, if the interceptor is set as follows, the interceptor function will be executed first to obtain the response body, and then it will be decided whether to return the response to

then for reception. Then we can add judgment on the response status code to this interceptor to decide whether to jump to the login page or stay on the current page and continue to obtain data.

The following code is added to main.js

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

Before knowing this method, I thought of a stupid method, but it can also reduce the modification workload to a certain extent. The method is to bind a this.$$http.get method to Vue to replace the this.$http.get method. Just add a $ before $http for each page's http request.

// 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)

How has everyone learned? Hurry up and give it a try.

Related recommendations:

How to implement various interceptors in php

Interceptor example code analysis in php

Detailed explanation of page interceptor for WeChat applet development

The above is the detailed content of Vue interceptor vue-resource Interceptor usage detailed explanation. For more information, please follow other related articles on the PHP Chinese website!