React Redux JavaScript中如何按顺序发起多个API端点调用

问题根因 #

当前所有业务组件独立在挂载阶段dispatch异步请求动作，Promise 实例默认并发执行，短时间内向gnews.io发起的请求数超过套餐限流阈值，就会返回429状态码。 #

可落地方案 #

方案1：根组件统一调度串行请求（改动最小，适合快速修复） #

把分散在各个子组件里的首屏数据拉取逻辑上移到App根组件，按顺序逐个dispatch异步action，等上一个请求完成后等待固定间隔再发起下一个请求，从根源避免并发。

1. 首先删除所有业务组件内useEffect挂载阶段触发请求的逻辑，避免重复调用
2. 在App.js中编写串行调度逻辑，示例代码如下：

// App.js
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
// 引入所有新闻模块对应的thunk
import { fetchTopHeadlines } from './store/thunks/fetchTopHeadlines';
import { fetchTechNews } from './store/thunks/fetchTechNews';
import { fetchSportsNews } from './store/thunks/fetchSportsNews';
import { fetchEntertainmentNews } from './store/thunks/fetchEntertainmentNews';
// 引入业务组件
import TopHeadlines from './components/TopHeadlines';
import TechNews from './components/TechNews';
import SportsNews from './components/SportsNews';
import EntertainmentNews from './components/EntertainmentNews';

// 请求间隔根据gnews套餐调整，免费版建议设1100ms，比官方1秒1次的阈值留100ms冗余
const REQUEST_GAP = 1100;

function App() {
  const dispatch = useDispatch();
  // 高优先级内容加载完成标记，用于首屏快速渲染
  const [coreContentReady, setCoreContentReady] = useState(false);

  useEffect(() => {
    const runSerialRequests = async () => {
      // 按优先级排列请求顺序，最高优先级的头条放最前面
      await dispatch(fetchTopHeadlines());
      // 高优先级内容加载完即可渲染页面，不用等所有接口返回
      setCoreContentReady(true);
      await new Promise(resolve => setTimeout(resolve, REQUEST_GAP));

      await dispatch(fetchTechNews());
      await new Promise(resolve => setTimeout(resolve, REQUEST_GAP));

      await dispatch(fetchSportsNews());
      await new Promise(resolve => setTimeout(resolve, REQUEST_GAP));

      await dispatch(fetchEntertainmentNews());
    };

    runSerialRequests();
  }, [dispatch]);

  // 高优先级内容没加载完时展示全局loading
  if (!coreContentReady) return <div>新闻内容加载中...</div>;

  return (
    <div className="app-wrapper">
      <TopHeadlines />
      <TechNews />
      <SportsNews />
      <EntertainmentNews />
    </div>
  );
}

export default App;

方案2：封装全局API请求队列（通用性强，适合长期维护） #

如果后续还会新增多个gnews接口调用场景，不用每次都手动写串行逻辑，可以封装一个全局请求队列，所有调用gnews的请求自动进入队列串行执行，自带间隔控制，不用改动现有组件的挂载逻辑。

1. 先实现通用请求队列类：

// utils/gnewsQueue.js
class GnewsRequestQueue {
  // 初始化时设置请求间隔，默认1100ms
  constructor(requestGap = 1100) {
    this.waitQueue = [];
    this.isRunning = false;
    this.requestGap = requestGap;
  }

  // 添加请求到队列，返回和原请求一致的Promise
  add(requestTask) {
    return new Promise((resolve, reject) => {
      this.waitQueue.push({ requestTask, resolve, reject });
      this.triggerNext();
    });
  }

  // 执行队列下一个请求
  async triggerNext() {
    if (this.isRunning || !this.waitQueue.length) return;
    this.isRunning = true;

    while (this.waitQueue.length) {
      const currentTask = this.waitQueue.shift();
      try {
        const result = await currentTask.requestTask();
        currentTask.resolve(result);
      } catch (err) {
        currentTask.reject(err);
        // 碰到429错误时额外等待2秒再继续，避免连续触发限流
        if (err?.response?.status === 429) {
          await new Promise(resolve => setTimeout(resolve, 2000));
        }
      }
      // 等待固定间隔再处理下一个请求
      await new Promise(resolve => setTimeout(resolve, this.requestGap));
    }

    this.isRunning = false;
  }
}

export const gnewsQueue = new GnewsRequestQueue();

2. 修改所有gnews相关的thunk逻辑，把接口请求包入队列：

// store/thunks/fetchTechNews.js
import { gnewsQueue } from '../../utils/gnewsQueue';

// 普通redux-thunk写法示例
export const fetchTechNews = () => async (dispatch) => {
  dispatch({ type: 'news/fetchTechNews/pending' });
  try {
    // 原fetch/axios请求传入队列add方法即可
    const data = await gnewsQueue.add(() => {
      return fetch(`https://gnews.io/api/v4/search?q=technology&apikey=${import.meta.env.VITE_GNEWS_KEY}&lang=zh`)
        .then(res => {
          if (!res.ok) throw new Error('Request failed');
          return res.json();
        });
    });
    dispatch({ type: 'news/fetchTechNews/fulfilled', payload: data });
  } catch (err) {
    dispatch({ type: 'news/fetchTechNews/rejected', payload: err });
  }
};

改完后哪怕所有组件还是在挂载时dispatch请求，所有接口请求会自动进入队列串行发送，不会出现并发打满限流的问题。 #

注意事项 #

• 请求间隔不要卡着服务商的限流阈值设置，留100-200ms的冗余，避免网络波动、事件循环延迟导致的时间计算误差触发429
• 首屏不用等所有接口返回再渲染，把用户最关心的高优先级内容放队列最前面，加载完就先渲染对应模块，剩下的内容在后台按队列顺序加载即可
• 不要用Promise.all批量发起同域名的API请求，这个方法会并发执行所有传入的Promise实例，就是触发本次限流问题的核心原因
• 可以在队列里加缓存逻辑，相同参数的请求在缓存有效期内直接返回缓存结果，进一步减少请求量

内容的提问来源于stack exchange，提问作者Priyabrata Chattaraj