React项目中请求接口的封装

最新推荐文章于 2025-06-10 21:20:21 发布

静水流深之鑫

最新推荐文章于 2025-06-10 21:20:21 发布

阅读量1.7w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_26941173/article/details/84940540

本文介绍了在React项目中如何封装API接口，包括ApiIp.js用于根据环境动态配置请求地址，ApiURL.js用于构建完整的请求URL，以及Api.js作为对外请求的入口，利用axios进行Promise封装，便于错误处理和组件使用。同时，文中还展示了如何处理POST请求以下载文件的特殊案例。

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

封装目录中所包含的文件

Api.js
ApiIp.js
ApiURL.js

ApiIp.js文件的作用

这个文件的作用主要是在开发环境和生产环境下调用不同的接口请求地址，生产环境下此文件的作用是动态
的获取浏览器中的地址进行拼装，便可以动态的获取地址，不需要写死

//获取当前的URL中的地址，同时携带端口号,不携带http://
let projectAddrass = window.location.host;
let projectAddrassNoPort = window.location.hostname;
//返回当前的URL协议,既http协议还是https协议
let protocol = document.location.protocol;
//封装请求接口的地址,如果服务器中套了一层性项目名称，需要在这里面添加上,需要留意，例如: /zzxl/
export const interfaceIp = `${
   
   protocol}//${projectAddrass}/zzxl`;
//LOGO图片的请求地址
export const logoImgAddress = `${
   
   protocol}//${projectAddrassNoPort}`;
//对外提供的服务地址
export const publicIp = process.env.NODE_ENV === 'development' ? 'http://10.222.40.243:8088' :
interfaceIp;
export const logoImgIp = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1' :
logoImgAddress;

ApiURL.js文件的作用

引入ApiIp.js传入的地址，并且封装上具体的请求路径，拼装成完整的请求地址，这样可以把所有的接口请求
地址放到一个文件中，降低耦合度，便于维护。

import ApiIP from './ApiIp';
// 登录
export const LOGIN = `${
   
   ApiIP}/index/captcha`;

Api.js文件的作用

对外请求接口服务的入口文件，借助于axios 的再次封装，返回为Promise 对象，因为Promise对象含有
then、catch方法便于进一步的处理。

import axios from 'axios';
import * as apiUrl from './ApiURL';
import {
   
   notification} from 'antd';

const key = 'keepOnlyOne';

/**
 *  接口请求数据时执行的方法
 *  接受参数为请求的路径apiUrl、请求接口配置参数configObj
 *
 * @param {String} apiUrl            用户传入的请求路径
 * @param {Object} configObj        用户传入的接口参数
 */
function getDataFromServer(apiUrl, configObj) {
   
   

    //用户传入的接口配置参数
    let {
   
   
        method = 'GET',
        params = {
   
   },
        data = {
   
   },
        timeout = 5000
    } = configObj