React 中对 Axios 的基本封装

一、Axios 简介

Promise based HTTP client for the browser and node.js
github：https://github.com/axios/axios

二、axios 的常用场景

1. 对特定的状态码，进行特殊处理（如 4xx 状态码，统一重定向到 404 页面）；
2. get 请求封装；
3. post 请求封装；
4. 返回数据 json 中的特定 code，作统一处理（如后端接口定义 220 - 300
   的状态码，对返回文案需要统一进行弹框提示）；
5. 单页面的多接口的并发请求（await 导致的多余等待）；

三、封装方案

预备工作

1. 能够实现全局的开始 loading、结束 loading、文案弹框的基本组件或方法（个人项目中使用了 redux 来实现全局通用组件的控制和页面缓存的使用）
2. es6 语法，并且能够支持 Promise，async，await 等语法

方法说明

// proxyUtil 该对象提供一系列操作 redux 中 store 数据方法，用来做全局组件的控制

// 显示 加载中 图标
proxyUtil.startLoading() 

// 关闭 加载中 图标
proxyUtil.endLoading()

// 全局文字提示弹框
proxyUtil.alertMessage(message: string)

详细代码

1、对特定请求状态码，进行特殊处理

import * as axios from 'axios'
// 全局设定请求类型
axios.defaults.headers.post['Content-Type'] = 'application/json'

// 根据 axios api，对请求返回做拦截处理
axios.interceptors.response.use(function (response) {
  if (response.status >= 400 && response.status < 500) {
      // 对返回状态码为 4xx 的请求统一处理
      // 此处统一跳转 404 页面
      window.location.href = decodeURI(`${window.location.protocol}//${window.location.host}/404.html`)
  } else {
    return response
  }
}, function (error) {
  proxyUtil.alertMessage(error)
})

2、get 请求封装

export function pget (url, params = {}) {
  // 开始 loading
  proxyUtil.startLoading()
  return axios.get(url, {
    params: params,
    validateStatus: function (status) {
      // axios 底层采用 Promise 实现，下方表达式表示只有返回 code 为 2xx 才被正常返回（resolve），非 2xx 全部当做异常（reject）
      return status >= 200 && status < 300
    }
  }).then(response => {
    // 结束 loading
    proxyUtil.endLoading()
    // 返回后端返回数据
    return response.data
  }).catch(error => {
    // 异常处理
    proxyUtil.endLoading()
    proxyUtil.alertMessage(error)
  })
}

3、post 请求封装

export function ppost (url, params = {}) {
  // 开始 loading
  proxyUtil.startLoading()
  return axios.post(url, params).then(response => {
    // 结束 loading
    proxyUtil.endLoading()
    return response.data
  }).catch(error => {
    // 异常处理
    proxyUtil.endLoading()
    proxyUtil.alertMessage(error)
  })
}

4、 返回数据 json 中的特定 code，作统一处理

这个只需要在 pget 方法或 ppost 方法中作特殊处理就行，以 pget 为例（TODO 处代码差异）：

export function pget (url, params = {}) {
  // 开始 loading
  proxyUtil.startLoading()
  return axios.get(url, {
    params: params,
    validateStatus: function (status) {
      // axios 底层采用 Promise 实现，下方表达式表示只有返回 code 为 2xx 才被正常返回（resolve），非 2xx 全部当做异常（reject）
      return status >= 200 && status < 300
    }
  }).then(response => {
    // 结束 loading
    proxyUtil.endLoading()
    // TODO 假定接口返回数据格式为 { code: 200, msg: "这是信息" }
    // 获取接口自定义 code
    let code = response.data.code
    // 获取接口返回 message，也可能是一个 object，一个数组
    let message = response.data.msg
    // 对于接口定义的特殊范围的 code，统一对返回的 message 作弹框处理
    if (code > 220 || code < 200) {
      proxyUtil.alertMessage(message.toString())
    }
    // 返回后端返回数据
    return response.data
  }).catch(error => {
    // 异常处理
    proxyUtil.endLoading()
    proxyUtil.alertMessage(error)
  })
}

5、单页面的多接口的并发请求（await 导致的多余等待）

export function asyncAll (requests = []) {
  // 开始 loading
  proxyUtil.startLoading()
  // 使用 axios 的 all 方法
  return axios.all(requests).then(resultArr => {
    // 结束 loading
    proxyUtil.endLoading()
    // 对结果做特殊化处理，此处是对返回接口 code 在一定范围内作信息弹框
    for (let result of resultArr) {
      let code = result.code
      if (code > 220 || code < 200) {
        proxyUtil.alertMessage(result.msg)
      }
    }
    //  返回每个方法返回的接口数据
    return resultArr
  }).catch(error => {
    // 异常处理
    proxyUtil.endLoading()
    proxyUtil.alertMessage(error)
  })
}

使用范例：
假定有两个接口请求 getUserName() 和 getUserAge()，现在一个页面需要同时请求这两个接口的数据，await 逐步等待明显浪费时间，所以我们可以采用下方写法。

// 处理用户信息
async loadUserData() {
    let [nameObj, ageObj] = await asyncAll([getUserName(), getUserAge()])
    this.userInfo.name = nameObj.msg
    this.userInfo.age = ageObj.msg
    // react 此处更多是应该在得到数据处理完之后，setState({userName: nameObj.msg, userAge: ageObj.msg})
}