拦截器函数
对request拦截器采用unshift（堆栈）
request.hanlders.forEach(item=>chains.unshift(item))
对response拦截器采用push（队列）
response.hanlders.forEach(item=>chains.push(item))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios的处理链流程</title>
</head>
<body>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
<script>
/*
requestInterceptors: [{fulfilled1(){}, rejected1(){}}, {fulfilled2(){}, rejected2(){}}]
responseInterceptors: [{fulfilled11(){}, rejected11(){}}, {fulfilled22(){}, rejected22(){}}]
chain: [
fulfilled2, rejected2, fulfilled1, rejected1,
dispatchReqeust, undefined,
fulfilled11, rejected11, fulfilled22, rejected22
]
promise链回调: config
=> (fulfilled2, rejected2) => (fulfilled1, rejected1) // 请求拦截器处理
=> (dispatchReqeust, undefined) // 发请求
=> (fulfilled11, rejected11) => (fulfilled22, rejected22) // 响应拦截器处理
=> (onResolved, onRejected) // axios发请求回调处理
*/
// 添加请求拦截器(回调函数)
axios.interceptors.request.use(
config => {
console.log('request interceptor1 onResolved()')
return config
},
error => {
console.log('request interceptor1 onRejected()')
return Promise.reject(error);
}
)
axios.interceptors.request.use(
config => {
console.log('request interceptor2 onResolved()')
return config
},
error => {
console.log('request interceptor2 onRejected()')
return Promise.reject(error);
}
)
// 添加响应拦截器
axios.interceptors.response.use(
response => {
console.log('response interceptor1 onResolved()')
return response
},
function (error) {
console.log('response interceptor1 onRejected()')
return Promise.reject(error);
}
)
axios.interceptors.response.use(
response => {
console.log('response interceptor2 onResolved()')
return response
},
function (error) {
console.log('response interceptor2 onRejected()')
return Promise.reject(error);
}
)
axios.get('http://localhost:3000/posts')
.then(response => {
console.log('data', response.data)
})
.catch(error => {
console.log('error', error.message)
})
/* axios.get('http://localhost:/posts2')
.then(response => {
console.log('data', response.data)
})
.catch(error => {
console.log('error', error.message)
})
*/
</script>
</body>
</html>
- 说明: 调用 axios()并不是立即发送 ajax 请求, 而是需要经历一个较长的流程
-流程：流程: 请求拦截器2 => 请求拦截器1 => 发ajax请求 => 响应拦截器1 => 响
应拦截器 2 => 请求的回调 - 注意: 此流程是通过 promise 串连起来的, 请求拦截器传递的是 config, 响应
拦截器传递的是 response
项目中使用
axios.interceptors.request.use(this.axiosRequest.bind(this), this.requestError.bind(this));
axios.interceptors.response.use(this.axiosReponse.bind(this), this.responseError.bind(this));
// 拦截请求
axiosRequest(config) {
// 登录token
const token = store.state.appToken;
if (config.params == null) {
config.params = {};
}
// 登录验证
if (!config.ignoreAuth) {
// 未登录或登录过期
if (!token) {
console.log(config);
throw new Error('未登录或登录过期');
}
// TODO: 设置token
// config.headers.token = token;
config.params.token = token;
}
// 设置平台类型
config.params.platform = appConfig.platformType || 'PC';
return config;
}
// 拦截响应
axiosReponse(response) {
const { data, config, headers } = response;
if (response.config.responseType === 'blob' && headers && headers['content-type'] && headers['content-type'].indexOf('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') > -1) {
const blob = new Blob([data], { type: 'application/vnd.ms-excel' }) // res就是接口返回的文件流了
// const objectUrl = URL.createObjectURL(blob)
// window.location.href = objectUrl
const link = document.createElement('a') // 生成一个a标签。
link.href = window.URL.createObjectURL(blob) // href属性指定下载链接
if (response.config.fileName) {
link.download = response.config.fileName + parseTime(new Date(), '{y}-{m}-{d}') // dowload属性指定文件名
}
link.click() // click()事件触发下载
}
// if (headers && headers['content-type'] && headers['content-type'].indexOf('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') > -1) {
// let blob = new Blob([data], {type: "application/vnd.ms-excel"}); // res就是接口返回的文件流了
// let objectUrl = URL.createObjectURL(blob);
// window.location.href = objectUrl;
// // let blob = new Blob([res2.data], { type: res2.data.type });
// // const url = window.URL || window.webkitURL || window.moxURL;
// // _this.urls = url.createObjectURL(blob);
// // const content = data;
// // const blob = new Blob([content]); //构造一个blob对象来处理数据
// // const fileName = "安全管理.xls";//excel使用 "test.xls"、zip使用test.zip
// // if ("download" in document.createElement("a")) {
// // //支持a标签download的浏览器
// // const link = document.createElement("a"); //创建a标签
// // link.download = fileName; //a标签添加属性
// // link.style.display = "none";
// // link.href = URL.createObjectURL(blob);
// // document.body.appendChild(link);
// // link.click(); //执行下载
// // URL.revokeObjectURL(link.href); //释放url
// // document.body.removeChild(link); //释放标签
// // } else {
// // //其他浏览器
// // navigator.msSaveBlob(blob, fileName);
// // }
// }
// TODO: 处理 登录超时, 未登录
if ([].includes(data.flag)) {
// 超时, 清空登录token
store.state.appToken = '';
cancelAllRequest();
// TODO: 弹框提示
return;
}
this.cancelMap.delete(config.requestId);
return data;
}
requestError(error) {
console.log(error);
}
responseError(error) {
console.log(error);
}
