React进行axios二次封装

最新推荐文章于 2025-05-06 21:54:27 发布

wenter5

最新推荐文章于 2025-05-06 21:54:27 发布

阅读量373

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wenter5/article/details/133607962

本文介绍了如何在React项目中进行axios的二次封装，包括引用API、参数检查和请求合法性判断，确保请求的正确性和高效性。通过封装，简化了实际开发中的请求调用流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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|post|patch:data
        isFormData = false, // 标识是否为form-data请求
        config = {}, // 配置参数
        spl