定义

在客户端通过axios发送请求或响应被 then 或 catch 处理前拦截它们。顾名思义，在axios发送请求之前在请求数据内添加条件或者验证，并通过函数返回错误。在收到服务器的响应数据进行返回，遇到无法响应的情况在catch之前拦截错误信息进行处理。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

示例代码

// 添加请求拦截器
// 统一携带token
axios.interceptors.request.use(function (config) {// 可以通过headers，查看+设置请求头// config.headers['info'] = 'itheima666'// 每次发送请求，都会执行这个回调函数// console.log(config)// 在发送请求之前做些什么,比如: 统一设置tokenconst token = localStorage.getItem('token')// token存在，才携带if (token) {config.headers['Authorization'] = token}return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
// 统一处理token过期
// 数据剥离
axios.interceptors.response.use(function (response) {// console.log(response)// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么，比如: 数据剥离// 剥离data属性，页面中少写.data属性，直接可以获取到数据return response.data;
}, function (error) {// console.dir(error)// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么: 比如统一处理token失效// 统一处理token失效if (error.response.status === 401) {// 弹框提示用户showToast('请重新登录')// 删除缓存localStorage.removeItem('token')localStorage.removeItem('username')// 返回登录页setTimeout(() => {location.href = 'login.html'}, 1500)}return Promise.reject(error);
});