React二次封装

原创于 2025-07-17 20:07:16 发布 · 300 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在实际的项目中，我们一般会进行二次封装。

一、创建.env文件

1.（.env.development）

REACT_APP_API_URL = 'https://goods.zzgoodqc.cn/'//接口前缀
REACT_APP_MODE = "development"

2.（.env.production）

REACT_APP_MODE = 'production'
REACT_APP_API_URL = 'https://goods.zzgoodqc.cn/'//接口前缀

二、在src目录中创建（utils）文件夹

在utils文件夹中创建一个（axios.js）文件这个是一次封装

import axios from 'axios';

axios.defaults.timeout = 30000;

// 修正：使用 REACT_APP_API_URL
if (process.env.REACT_APP_API_URL) {
    axios.defaults.baseURL = process.env.REACT_APP_API_URL;
} else {
    console.error('API URL未定义，请检查环境变量'); // 这句报错就是因为之前变量名错误
}

// 修正：使用 REACT_APP_API_TOKEN
if (process.env.REACT_APP_API_TOKEN) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${process.env.REACT_APP_API_TOKEN}`;
}

// 添加请求拦截器
axios.interceptors.request.use(
    config => {
        // 修正：使用 REACT_APP_MODE
        if (process.env.REACT_APP_MODE === 'development') {
            console.log('开发环境请求');
        } else if (process.env.REACT_APP_MODE === 'test') {
            console.log('测试环境请求');
        } else {
            console.log('正式环境请求');
        }
        return config;
    },
    error => Promise.reject(error)
);

export const request = (options) => {
    return new Promise((resolve, reject) => {
        const config = {
            url: options.url,
            method: options.method || 'GET',
            headers: options.headers || {}, // 确保 headers 能正确合并
            [options.method.toLowerCase() === 'get' ? 'params' : 'data']: options.data || {},
        };
        axios(config)
            .then((res) => {
                resolve(res.data);
            })
            .catch((err) => {
                // 提供更详细的错误信息
                reject({
                    message: err.message,
                    response: err.response
                });
            });
    });
};

三、进行二次封装在在utils文件夹中再次创建一个（api.js）

import {
	request
} from './axios';//引入一次封装
 
// 登录接口
export const newsList = (data) => {
	return request({
		url: '/index.php/index/news/newsList',//接口的后半部分
		method: 'post',
		data: data
	});
};

这样React的axios请求封装就完成了