封装axios要处理的核心点：

  • Loading处理
    • 请求前的 Loading
    • 请求后的 Loading
  • 错误拦截
    • 请求拦截
      • AuthorizationToken
    • 响应拦截
    • 请求出错的处理
    • 响应出错的处理，重点
      • 响应状态处理
      • 异常信息提示
  • 取消请求
    • 请求前，先取消上一个请求，例如：用户狂点请求，取消重复的请求
  • 请求缓存 requestCache

https://juejin.cn/post/7003585746065948703
https://juejin.cn/post/6847009771606769677
https://juejin.cn/post/6968630178163458084
https://juejin.cn/post/6844903969152565261
https://juejin.cn/post/6968487137670856711

request

数据清洗

请求前的数据清洗，删除掉 undefined, ‘’, null等 falsy值

jwt设置请求头

get请求 Content-Type

get请求参数的序列化

  1. Content-Type: application/json
  2. Content-Type: application/x-www-form-urlencoded
  3. Content-Type: multipart/form-data

post请求

响应拦截

错误处理

后端响应错误处理
客户端断网处理
3xx重定向
4xx权限处理
5xx错误

根据不同的状态码，生成不同的提示信息

  1. const showStatus = (status) => {
  2.     let message = ''
  3.     // 这一坨代码可以使用策略模式进行优化
  4.     switch (status) {
  5.         case 400:
  6.             message = '请求错误(400)'
  7.             break
  8.         case 401:
  9.             message = '未授权，请重新登录(401)'
  10.             break
  11.         case 403:
  12.             message = '拒绝访问(403)'
  13.             break
  14.         case 404:
  15.             message = '请求出错(404)'
  16.             break
  17.         case 408:
  18.             message = '请求超时(408)'
  19.             break
  20.         case 500:
  21.             message = '服务器错误(500)'
  22.             break
  23.         case 501:
  24.             message = '服务未实现(501)'
  25.             break
  26.         case 502:
  27.             message = '网络错误(502)'
  28.             break
  29.         case 503:
  30.             message = '服务不可用(503)'
  31.             break
  32.         case 504:
  33.             message = '网络超时(504)'
  34.             break
  35.         case 505:
  36.             message = 'HTTP版本不受支持(505)'
  37.             break
  38.         default:
  39.             message = `连接出错(${status})!`
  40.     }
  41.     return `${message}，请检查网络或联系管理员！`
  42. }
  44. // 响应拦截器
  45. service.interceptors.response.use((response) => {
  46.     const status = response.status
  47.     let msg = ''
  48.     if (status < 200 || status >= 300) {
  49.         // 处理http错误，抛到业务代码
  50.         msg = showStatus(status)
  51.         if (typeof response.data === 'string') {
  52.             response.data = { msg }
  53.         } else {
  54.             response.data.msg = msg
  55.         }
  56.     }
  57.     return response
  58. }, (error) => {
  59.     // 错误抛到业务代码
  60.     error.data = {}
  61.     error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'
  62.     return Promise.resolve(error)
  63. })

跨域处理

轻松处理跨域和超时的问题

  • 否允许跨域的属性 withCredentials
  • 超时时间的属性——timeout