Vue adds a request interceptor and the use of vue-resource interceptor

This article mainly introduces Vue to add request interceptors and the use of vue-resource interceptors. Friends who need it can refer to it

1. Phenomenon

Unified 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. Make a reference in main.js and configure an alias ($ajax) to 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, 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 way to solve 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 be done in Reduce the modification workload to a certain extent. The method is to bind a

this.$$http.get method to Vue instead of the this.$http.get method, and add a $ before $http for each page's http request. Can.

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the problem that the vuex method in the parent component updates the state and the child component cannot be updated and rendered in time

In Introduction to the installation method of using stylus for the first time after initialization after creating a vue project

The above is the detailed content of Vue adds a request interceptor and the use of vue-resource interceptor. For more information, please follow other related articles on the PHP Chinese website!