vue axios interceptors 拦截器

背景
为统一解决各种请求报错的提示，以及设置一些通用的headers。

指导思想
1、设置请求前的参数。
2、设置响应后的数据处理方式。
3、将配置好的axios绑定到 Vue 的原型上。

方法论
1、新建axios.config.js文件

import axios from 'axios'
import { vant } from 'vant'

//设置请求前的参数
axios.interceptors.request.use(config => {
	//设置为ajax请求（异步http请求），若 'X-Requested-With' 的值为null，则为同步；	
	config.header['X-Requested-With'] = 'XMLHttpRequest'
	return config
})

//设置响应后的状态处理
axios.interceptors.responce.use((responce)=>{
	const data = responce.data;
	if(data.status == 0){
		return data
	}else if(data.stateCode == 'jb_000000'){
		return data.data
	}else {
        const err = new Error(data.description)
        err.data = data
        err.response = response
        Dialog.alert({title: "错误", message: data.description})
        throw err
        }
}, (err)=>{
	if (err && err.response) {
		 switch (err.response.status) {
            case 400:
                err.message = '请求错误'
                break
            case 403:
                err.message = '拒绝访问'
                break
            case 404:
                err.message = `请求地址出错: ${err.response.config.url}`
                break
             default;
             Dialog.alert({title: "错误", message: err.message})
	}
	return Promise.reject(err)
})
export default axios

2、在main.js中写入

 import Vue from 'vue'
 import axios from '../config/axios.config.js'
 Vue.prototype.$axios = axios

3、应用

this.$axios.get(url)

延伸
Vue.config.productionTip = false
表示会以生产模式运行，vue不会在console里面进行提示或者警告。
而Vue.config.productionTip = true
表示对于常见的错误与陷阱，vue会提供很多警告来进行。