React进行axios二次封装_reactts二次封装axios

1.引用及准备

封装之前首先进行引用及构造请求地址API。其中services模块汇总了所有请求地址与类型，请求示例如reqCheckLogin所示。

/**
 * services模块根据接口文档定义接口的名称和方法
 * 根据模块拆分文件
 * index.js为出口文件，需要引入其他的services并整合
 */
import login from './login'
import permission from './permission'
import menu from './menu'
import user from './user'
 
const API = Object.assign(
    {},
    login,
    permission,
    menu,
    user,
)
 
export default API

2.二次封装

首先创建axios示例，然后遍历services中的请求进行参数检查，根据参数判断请求的合法性，返回不同的信息。 

// services 循环遍历输出不同的请求方法
let baseURL = '/url'
let instance = axios.create({
    baseURL: baseURL,
    timeout: 10000,
})
 
const Http = {} // 包裹请求方法的容器
 
// 请求格式/参数的统一
for (let key in services) {
    let api = services[key]; // url method
    // async方法，同步方式写异步代码
    Http[key] = async function (
        params, // 请求参数 get|delete:url,put|pos