javascript

axios 全局请求参数设置，请求及返回拦截器

应用场景：
1，每个请求都带上的参数，比如 token，时间戳等
2，对返回的状态进行判断，比如 token 是否过期

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
axios.interceptors.request.use(
    config => {
        var xtoken = getXtoken();
        if (xtoken != null) {
            config.headers["X-Token"] = xtoken;
        }
        if (config.method == "post") {
            config.data = {
                ...config.data,
                _t: Date.parse(new Date()) / 1000
            };
        } else if (config.method == "get") {
            config.params = {
                _t: Date.parse(new Date()) / 1000,
                ...config.params
            };
        }
        return config;
    },
    function(error) {
        return Promise.reject(error);
    }
);
axios.interceptors.response.use(
    function(response) {
        // token 已过期，重定向到登录页面
        if (response.data.code == 4) {
            localStorage.clear();
            router.replace({
                path: "/signin",
                query: { redirect: router.currentRoute.fullPath }
            });
        }
        if (response.data.code == 5) {
            throw new Error(response.data.message); //终止响应
        }

        return response;
    },
    function(error) {
        // Do something with response error
        return Promise.reject(error);
    }
);

使用 axios 拦截器取消请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
// let that = this
axios.interceptors.request.use(
    function(config) {
        // 预处理请求信息（config）
        console.log(config);
        let dt = new Date();
        let pd = intercept.createIntercept(store, config.name, dt.getTime());
        if (pd === false) {
            config.cancelToken = source.token;
            // 取消请求（message 参数是可选的）
            source.cancel("Operation canceled by the user.");
        }
        return config;
    },
    function(error) {
        // 预处理请求有异常（error）时抛出错误
        return Promise.reject(error);
    }
);

在向服务器发送前，修改请求数据，使用transformRequest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script>
  import axios from 'axios'
  import qs from 'qs'

  let http = axios.create({
    baseURL: 'https://www.easy-mock.com/mock/5d41580a1a802c0d5e53dcc2/example/',
    // 可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL

    transformRequest: [function (data) {
      // `transformRequest` 允许在向服务器发送前，修改请求数据
      // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
      data.sex = 'man'
      return qs.stringify(data)
      // 结合create_headers里的内容，在这里又新增一条信息sex=man
      // 因此network中查看的结果是：name=xiaoming&age=12&sex=man
    }],

    headers: {'content-type': 'application/x-www-form-urlencoded'},
  })
  export default {
    name: "create_transformRequest",
    methods: {
      postUrl () {
        http.post('bb', {
          'name': 'xiaoming',
          'age': 12
        })
      }
    },
    created () {
      this.postUrl()
    }
  }
</script>

参考：vue axios 请求拦截器，取消