封装 Axios

基本使用

1
2
3
4
5
6
7
8
9
10
axios('url', {
  method: 'get',
  timeout: 3000,
  headers: {...}
  // ...
}).then((res) => {
  // ...
}, (err) => {
  // 错误处理
})

封装

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
// 自定义axios实例
const service = axios.create({
  // 设置baseUrl node环境下的地址
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 3000,
  headers: { "X-Requested-With": "XMLHttpRequest" },
});
// 全局请求拦截，所有的网络请求发起之前都会走这这里
service.interceptors.request.use(
  (config) => {
    // 如果需要加token
    const token = "token";
    if (token) {
      axios.defaults.headers.common["X-CSRF-TOKEN"] = token;
    }
    return config;
  },
  (error) => {
    // 全局错误处理
    console.log(error);
    return Promise.reject(error);
  }
);

service.interceptors.response.use(
  (response) => {
    console.log(response);
    // res即是后端返回数据
    const res = response.data;
    if (res.info !== "success") {
      switch (res.err_code) {
        case "-1" /*处理错误码*/:
          break;
        default: /*默认处理*/
      }
      return Promise.reject(res);
    } else {
      // 成功的处理
      return res;
    }
  },
  (error) => {
    if (!axios.isCancel(error)) {
      // 错误处理
      switch (error.response && error.response.status) {
        case 401 /*处理401错误*/:
          break;
        // ...
      }
      return Promise.reject(error);
    }
  }
);

export default service;

使用

1
2
3
4
5
6
import request from '@/utils/request'
function requestGET(params) {
  url: '',
  methods: 'get',
  parmas
}

总结

  1. 首先创建自定义 axios 实例，配置所有请求共有的配置项
  2. 设置拦截器，处理所有请求共有的错误

文档链接

1
2
http://www.axios-js.com/
node_modules/axios/readme