axios拦截设置和错误处理

现在vue的官方包已经不更新vue-resource了，转而推荐axios，下面是项目实战是总结的axios插件设置：

/** * @file Axios的Vue插件（添加全局请求/响应拦截器） */// https://github.com/mzabriskie/axiosimport axios from 'axios'// 拦截request,设置全局请求为ajax请求axios.interceptors.request.use((config) => {  config.headers['X-Requested-With'] = 'XMLHttpRequest'  return config})// 拦截响应response，并做一些错误处理axios.interceptors.response.use((response) => {  const data = response.data// 根据返回的code值来做不同的处理（和后端约定）  switch (data.code) {    case '0':      // 举例      // exp: 修复iPhone 6+ 微信点击返回出现页面空白的问题      if (isIOS()) {        // 异步以保证数据已渲染到页面上        setTimeout(() => {          // 通过滚动强制浏览器进行页面重绘          document.body.scrollTop += 1        }, 0)      }      // 这一步保证数据返回，如果没有return则会走接下来的代码，不是未登录就是报错      return data    // 需要重新登录    case 'SHIRO_E5001':      // 微信生产环境下授权登录      if (isWeChat() && IS_PRODUCTION) {        axios.get(apis.common.wechat.authorizeUrl).then(({ result }) => {          location.replace(global.decodeURIComponent(result))        })      } else {        // 否则跳转到h5登录并带上跳转路由        const search = encodeSearchParams({          next: location.href,        })        location.replace(`/user/login?${search}`)      }      // 不显示提示消息      data.description = ''      break    default:  }  // 若不是正确的返回code，且已经登录，就抛出错误  const err = new Error(data.description)  err.data = data  err.response = response  throw err}, (err) => { // 这里是返回状态码不为200时候的错误处理  if (err && err.response) {    switch (err.response.status) {      case 400:        err.message = '请求错误'        break      case 401:        err.message = '未授权，请登录'        break      case 403:        err.message = '拒绝访问'        break      case 404:        err.message = `请求地址出错: ${err.response.config.url}`        break      case 408:        err.message = '请求超时'        break      case 500:        err.message = '服务器内部错误'        break      case 501:        err.message = '服务未实现'        break      case 502:        err.message = '网关错误'        break      case 503:        err.message = '服务不可用'        break      case 504:        err.message = '网关超时'        break      case 505:        err.message = 'HTTP版本不受支持'        break      default:    }  }  return Promise.reject(err)})axios.install = (Vue) => {  Vue.prototype.$axios = axios}export default 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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122