背景
为统一解决各种请求报错的提示,以及设置一些通用的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会提供很多警告来进行。