axios拦截器

传统的引入方式

  1. vue2
1
2
3
4
5
import axios from 'axios';

axios.defaults.baseURL = 'https://www.escook.cn'

Vue.prototype.$http = axios;
  1. vue3
1
app.config.globalProperties.$http = axios;

什么是拦截器

拦截器（Interceptors）会在每次发起ajax请求和得到响应时自动触发。

应用场景：

  • Token身份验证

  • Loading效果

如何使用请求拦截器

通过axios.interceptors.request(成功回调,
失败回调)可以配置请求拦截器，示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
axios.interceptors.request(config => {

return config;

},

error => {

return Promise.reject(error);

});

注意：失败回调可以省略。

Token认证

1
2
3
4
5
6
7
8
9
10
11
12
13
import axios from 'axios';

axios.defaults.baseURL = 'https://www.escook.cn';

axios.interceptors.request.use(config => {

config.headers.Authorization = 'Bearer XXX';

return config;

});

Vue.prototype.$http = axios;

Loading效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import axios from 'axios';

import { Loading } from 'element-ui';

let loadingInstance = null;

axios.defaults.baseURL = 'https://www.escook.cn';

axios.interceptors.request.use(config => {

loadingInstance = Loading.service({ fullscreen: true });

return config;

})

如何使用响应拦截器

通过关闭上例的Loading效果来展示响应拦截器的功能：

1
2
3
4
5
6
7
axios.interceptors.response.use(response => {

loadingInstance.close();

return response;

});

参考：

Vue3.0-12.拦截器 - 了解在vue2项目中如何全局配置axios

Vue3.0-13.拦截器 - 了解拦截器的概念及典型应用场景

Vue3.0-14.拦截器 - 使用请求拦截器配置Token认证

Vue3.0-15.拦截器 - 使用拦截器实现Loading效果

Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！