在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})

}

更多React相关技术文章，请访问React答疑栏目进行学习！