学习目标：

axios 拦截器

学习内容：

axios 拦截器

---

学习笔记：

axios 拦截器

一、什么是axios拦截器、为什么要使用axios拦截器？

在vue项目中，我们通常使用axios与后台进行数据交互，axios是一款基于promise封装的库，可以运行在浏览器端和node环境中。

axios特性：
1、拦截请求和响应
2、取消请求
3、转换json
4、客户端防御XSRF等。

使用拦截器的原因：

若出现请求数多的情况下，我们将会用到 axios 的一个API：拦截器。
页面发送http请求，很多情况我们要对请求和其响应进行特定的处理，
如果每个请求都附带后端返回的token，我们需要在拿到response之前loading动画的展示等。

拦截器的分类：

拦截器分为 请求（request）拦截器和 响应（response）拦截器。

拦截器的使用：
在请求或响应被 then 或 catch 处理前拦截它们。

（1）、请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(
    function (config) {
        do......
        // 在发送请求之前进行操作
        return config;
    },
    function (error) {
        do......
        // 对请求错误进行操作
        return Promise.reject(error);
    }
);
1
2
3
4
5
6
7
8
9
10
11
12
13

举例：

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) { 
         // 判断是否存在 token, 如果存在的话, 则每个 http header 都加上 token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });
1
2
3
4
5
6
7
8
9
10
11
12

（2）、响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(
    function (response) {
        // 对响应数据进行操作
        return response;
    },
    function (error) {
        // 对响应错误进行操作
        return Promise.reject(error);
    }
);
1
2
3
4
5
6
7
8
9
10
11

举例：

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除 token 信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)  
         // 返回接口返回的错误信息
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

说明：
如果我们使用中需要统一处理所有 http 请求和响应, 就需要使用 axios 拦截器。
通过配置 http response inteceptor, 如果后端接口返回 401 Unauthorized(说明该用户未授权), 用户需重新登录。

移除拦截器：

const myInterceptor = axios.interceptors.request.use(function () {
 do ...... 
//具体的操作
});
axios.interceptors.request.eject(myInterceptor);


为自定义 axios 实例添加拦截器：

const instance = axios.create();
instance.interceptors.request.use(function () { 
    do ...... 
   //具体的操作
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如何在项目中调用 axios 拦截器

1、将axios封装好
2、在项目中直接调用即可
（注：接口统一写在api文件夹中，为了我们后期使用及维护方便，书写是我们最好将不同模块或组件的请求分开写到不同的文件里）。（如果你的业务非常复杂，建议把

举例：

//   示例 js 文件  -----   api_exm.js

import request from '@/utils/request'

export function userSearch(name) {
  return request({
    url: '/sys/user',
    method: 'get',
    params: { name }
  })
}
1
2
3
4
5
6
7
8
9
10
11

然后在具体的组件中进行调用即可

import { userSearch} from '@/api/api_exm'     //现在文件中导入需要使用的 js 文件
export default {
  data() {
    return {
        name: '测试aaa'
    }
  },
  methods:{
      getUserInfo () {    //在方法中直接调用封装好的 axios 拦截器
          userSearch(this.name).then(res => {
           do......
              //可对 res.data 进行操作、处理或者渲染
          })
      }
  },
  mounted() {
      this.getUserInfo ();
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦