axios 的简单封装

发表于 | 浏览 次
字数统计: 396 字 | 阅读时长 ≈ 1 分钟

尝试对 axios 进行简单的封装。

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import axios from 'axios';

switch (process.env.NODE_ENV) {
  case 'production':
    axios.defaults.baseURL = 'http://api.balabala.cn';
    break;
  case 'test':
    axios.defaults.baseURL = 'http://192.168.1.1:8080';
    break;
  default:
    axios.defaults.baseURL = 'http://127.0.0.1:3000';
}

/**
 * 设置超时时间和跨域是否允许携带凭证
 */
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true;

/**
 * 设置请求传递的数据格式（需要看服务器要求什么格式）
 * 比如：x-www-form-urlencoded
 */

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = paramData => qs.stringify(paramData);

/**
 * 设置请求拦截器
 * 客户端发送请求 -> [请求拦截器] -> 服务器
 * token 校验(JWT): 接收服务器返回的 token，存储到 vuex /本地存储。每一次向服务器发请求，应该把 token 带上
 */
axios.interceptors.request.use((config) => {
  // 携带 token
  let token = localStorage.getItem('token');
  token && (config.headers.Authorization = token);
  return config;
}, error => {
  return Promise.reject(error);
})

/**
 * 设置响应拦截器
 * 服务器返回信息 -> [拦截的统一处理] -> 客户端获取到的信息
 */

// axios.defaults.validateStatus = status => {
//   //  自定义响应成功的 http 状态码
//   return /^(2|3)\d{2}$/.test(status);
// };

axios.interceptors.response.use(response => {
  return response.data;
}, error => {
  let {
    response
  } = error;
  if (response) {
    // 服务器返回结果了
    switch (response.status) {
      case 401: // 权限
        break;
      case 403: // 服务器拒绝执行(token 过期)
        break;
      case 404: // 找不到页面
        break;
      case 401: // 权限
        break;
    }
  } else {
    // 服务器没返回结果
    // 1.客服端断网了
    if (!window.navigator.onLine) {
      // 断网处理，跳转到断网页面
      return;
    }
    // 2.服务器崩了
    return Promise.reject(error);
  }
});

export default axios;