一、现象
统一处理错误及配置请求信息
二、解决
1、安装 axios , 命令： npm install axios --save-dev
2、在根目录的config目录下新建文件 axios.js ，内容如下：
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、在main.js中进行引用，并配置一个别名（$ajax）来进行调用:
import axios from 'axios'
import '../config/axios'
Vue.prototype.$ajax = axios
如图：
4、应用，一个登录的post如：
this.$ajax({
method: 'post',
url: '/login',
data: {
'userName': 'xxx',
'password': 'xxx'
}
}).then(res => {
console.log(res)
})
5、当页面静止放置太久时，请求出现超时，点击页面不进行刷新数据时，可以响应拦截器处添加404的错误处理，如响应拦截器修改为：
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
// 兼容处理超时时返回的404
if (responseError && responseError.response && responseError.response.status === 404) {
// 比如跳转到登录页
router.push({ name: 'login' })
}
});
三、总结
统一处理方便