页面发送http请求，很多情况我们要对请求和其响应进行特定的处理；如果请求数非常多，单独对每一个请求进行处理会变得非常麻烦，程序的优雅性也会大打折扣。
好在强大的axios为开发者提供了这样一个API：拦截器。
拦截器分为 请求（request）拦截器和 响应（response）拦截器
请求拦截器
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);
})
vue添加axios拦截器
安装 axios
npm install axios –save-dev
新建文件 axios.js（设置请求超时时间用）
开始统一封装axios， 首先引入axios、qs依赖
import axios from "axios";
import qs from "qs";
然后创建一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置：
/****** 创建axios实例 ******/
const service = axios.create({
baseURL: process.env.BASE_URL, // api的base_url
timeout: 5000 // 请求超时时间
});
使用request拦截器对axios请求配置做统一处理
service.interceptors.request.use(config => {
app.$vux.loading.show({
text: '数据加载中……'
});
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config;
}, error => { //请求错误处理
app.$vux.toast.show({
type: 'warn',
text: error
});
Promise.reject(error)
}
);
对response做统一处理
service.interceptors.response.use(
response => { //成功请求到数据
app.$vux.loading.hide();
//这里根据后端提供的数据进行对应的处理
if (response.data.result === 'TRUE') {
return response.data;
} else {
app.$vux.toast.show({
//常规错误处理
type: 'warn',
text: response.data.data.msg
});
}
},
error => { //响应错误处理console.log('error');
console.log(error);
console.log(JSON.stringify(error));
let text = JSON.parse(JSON.stringify(error)).response.status === 404
? '404'
: '网络异常，请重试';
app.$vux.toast.show({
type: 'warn',
text: text
});
return Promise.reject(error)
}
)
demo
// 根据状态码进行判断跳转
// -100跳回登录 -101提示错误信息
axios.interceptors.response.use(function (response) {
let that = this
let sid = window.location.href
if (response.status == -100) {
router.replace({
path: '/admin_login',
query: {backurl: sid}
})
} else if (response.status == -101) {
this.$message.error(response.data.message);
}
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
