为什么要用拦截器以及作用?
说白了就是,在调用http前要干点什么 和在接受到http返回后要干点什么
调用前要干点什么?刷新token,传递设备编号等
调用后要干点什么?例如结果日志的保存?接口结果的缓存等
官网说明 https://www.axios-http.cn/docs/interceptors
例如我有个自定义封装的axios文件
import myAxios from 'axios'; //这里应该写import axios from 'axios' 的,别介意 哈哈;
// axios网络请求封装请求开始
import { Cookies } from 'quasar';
import process from 'process';
let axios = null;
// 为什么调用前的代码 不写在这里?
axios = myAxios.create({
baseURL: process.env.API_ROOT,
timeout: 15000,
withCredentials: false,
headers: {
TermNo: Cookies.get('termNo'), //业务需要的设备编号 或者可以当成是token来理解
'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
'Access-Control-Allow-Methods': 'OPTIONS, GET, POST'
}
});
// 为什么调用后的代码 不写在这里?
上述例子抛出的问题:为什么不直接写调用前后的代码?
因为我们在使用封装的axios的时候。是引入这个js文件。
也就是说。这个js文件只在浏览器里面加载了一次(除非你刷新浏览器)
如果这样写,造成的结果就是TermNo这个值,永远只是浏览器加载那一刻的值。后续不会变化
外面api业务层引用这个自定义axios,只是引入这里的对象而已。这里要弄清楚
如果不用拦截器,当然我们可以在外面的api业务层,每个接口都写上最新的token。
不过这就太不优雅了!
使用拦截器
将上述代码稍加改动
import myAxios from 'axios'; //这里应该写import axios from 'axios' 的,别介意 哈哈;
// axios网络请求封装请求开始
import { Cookies } from 'quasar';
import process from 'process';
let axios = null;
axios = myAxios.create({
baseURL: process.env.API_ROOT,
timeout: 15000,
withCredentials: false,
headers: {
TermNo: Cookies.get('termNo'), //业务需要的设备编号 或者可以当成是token来理解
'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
'Access-Control-Allow-Methods': 'OPTIONS, GET, POST'
}
});
// 添加请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
// debugger;
config.headers['TermNo'] = Cookies.get('termNo');
console.log('拦截器');
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
export default axios;
这样每次请求之前,都会执行function中的动作
也就是从Cookies.get(‘termNo’) 获取新的值给TermNo了