React.js中封装API并向其他组件共享数据的无Promise实现咨询

首先明确：浏览器端的HTTP请求本身是异步操作，无法完全脱离异步处理机制，你所说的「不使用Promise」如果是指避免手动封装Promise、不用显式写.then()调用，完全可以实现，具体方案如下：

第一步：优化冗余的API.js代码 #

你现有代码存在两个明显的冗余问题：

1. async函数本身默认返回Promise，不需要手动再套一层new Promise
2. await和.then不需要同时使用，二选一即可

另外我们可以新增全局缓存变量，实现一次请求、多组件共享结果，避免重复发起请求：

// API.js 文件
import axios from "axios";

// 全局缓存变量，存储请求返回的用户数据
let cachedTableData = null;

export async function getTableData() {
  // 已有缓存直接返回，不用重复请求
  if (cachedTableData) return cachedTableData;
  try {
    const response = await axios.get("https://randomuser.me/api/?results=100");
    cachedTableData = response.data.results;
    return cachedTableData;
  } catch (error) {
    console.error("接口请求失败：", error);
    throw error;
  }
}

第二步：组件内用async/await调用，不用显式写Promise逻辑 #

你可以在useEffect里写异步自执行函数，完全不用写.then相关代码：

// Search.js 文件
import { useState, useEffect } from "react";
import { getTableData } from "../../../services/Api";
import "./Search.css";

const Search = () => {
  const [userData, setUserData] = useState([]);
  const [q, setQ] = useState("");

  useEffect(() => {
    // 异步自执行函数，业务层无Promise显式代码
    const fetchData = async () => {
      const res = await getTableData();
      setUserData(res);
    };
    fetchData();
  }, []);

  // 剩余组件业务逻辑
  return <div>组件内容</div>
};

补充说明 #

如果你是希望完全抛弃Promise底层机制实现异步请求共享，目前JS生态没有可行方案：async/await本身就是Promise的语法糖，底层依然基于Promise实现异步处理。上面的方案已经做到业务代码层面完全不用手写Promise相关逻辑，同时通过全局缓存实现了数据多组件共享，满足你统一管理API、数据复用的需求。

内容的提问来源于stack exchange，提问作者yogesh sharma