Reactjs react钩子中的同步异步API调用

我在React项目中使用钩子已经有一段时间了，并且开发了一个钩子来获取数据，类似于许多其他钩子，我就是这样使用的

const [callApi, isLoading, result, errrors] = useData();

callApi是一个使用数据和axios配置调用的函数，它进行API调用并更新其他变量。我在useffect（）调用中处理结果，该调用设置接收新数据时的状态。这相当简单

问题是，虽然它一次只能处理一个请求，但它只有一个isLoading状态和一个result状态，如果在前一次调用完成之前调用它，这是不好的。假设我的用户向他的朋友发送了一条消息，UI显示了一个朋友列表，每个名字旁边都有一个“发送消息”按钮，他们可能会单击3个按钮，然后快速连续拨打3个电话。然后我们有一个竞赛条件，看看谁先决定结果

我习惯于使用承诺进行命令式编程，在我以前的Angular代码中，单击按钮将调用一个事件处理程序，该事件处理程序将调用api和承诺。然后（）将处理结果。这可能会同时发生100次，每一次都会单独解决，然后更新UI

---

因此，我的问题是，是否有一种惯用的方式使用react钩子声明性地执行此操作，以便我可以触发多个请求并分别处理加载/结果/错误？

这似乎是一种通过API使用队列更好地处理的功能。这在您的控制范围内吗？使用

useData（）

中的队列（数组）跟踪有多少未决请求。当发出新请求时，将未解析的承诺添加到队列中。当承诺解析时，将其从队列中移除<如果队列长度大于零，则code>isload将等于

true

。@ChristophenGo在本例中为是，但在许多情况下为否。例如，如果我调用邮政编码，则每次用户键入一封信时都要在打字框中查找。@jered，返回的多个结果如何？我的useffect（）函数是否会为每个结果运行，即使它们的结果都相同？在该代码的命令式版本中，每个调用将解析具有不同结果的承诺，而不是更新相同的结果变量。如果只能有一个

结果

，那么您只需在创建新承诺时放弃以前的承诺，并且仅在最近的承诺解析时更新

结果

。