JS/React：存储和同步 API 调用的队列答案

【问题标题】：JS/React: queue to store and sync API callsJS/React：存储和同步 API 调用的队列
【发布时间】：2022-01-20 00:35:39
【问题描述】：

目标是创建一个队列来存储 API 请求。

预期结果：

每次按下Add 按钮时，都应将请求添加到队列中；
一旦按下Sync 按钮，来自队列的所有 API 请求都应该被触发并清除

这是我迄今为止尝试过的： https://codesandbox.io/s/elated-sky-e23w6?file=/src/App.js

这里有几个问题：

API 调用不会被触发；
每次添加新请求时，_store 都会被清除；
同步不工作。
如何存储 API 请求配置？

如何解决？谢谢！

【问题讨论】：

标签： javascript reactjs queue

【解决方案1】：

队列必须存储为 React 组件的状态。你需要的是useState 或useRef 钩子。后者在您的情况下更好，因为您已经实现了BoxEventProcessor，并且在单击add/submit 按钮时不需要重新渲染任何组件。（看区别here）

const App = () => {
  const sendEventToServer = async (id) => { ... };

  const refBoxEventProcessor = React.useRef(
    createSerialProcessor(sendEventToServer)
  );

  const submit = (id) => {
    refBoxEventProcessor.current.addEvent(`param-${id}`, new Date().toString());
  };

  const onSync = () => {
    refBoxEventProcessor.current.processEvents();
  };

  return (<>...</>);

以上是useRef() 的最小示例。它的参数是一个新创建的SerialProcessor 实例，它将存储在current 属性下的对象refBoxEventProcessor 中。它将在以后重新渲染时保持不变。用户的所有“API请求”都存储在这个对象的队列中，直到用户点击sync按钮清空队列。

您可以详细说明初始化 (useRef) 和 submit 函数以更好地满足您的需求。

https://codesandbox.io/s/answer-to-so-70387163-0yqi5

【讨论】：