在 Javascript 中正确处理多个调用答案

【问题标题】：Handle Multiple Calls Correctly in Javascript在 Javascript 中正确处理多个调用
【发布时间】：2019-11-26 04:47:32
【问题描述】：

以下是我的场景，其中我使用搜索关键字访问搜索 API，但由于时间不均，它占用的 UI 没有正确更新。

场景-

所以在这里你可以看到 - 请求 1 在 5 秒内获取数据，2 在 4 秒内获取数据，在 3 秒内获取数据，所以在 UI 中结果类似于 -

a => /?q=a (5s)
ab => /?q=ab (4s)
abc => /?q=abc (3s)

UI 中的结果 -

=> Result of abc
=> Result of abb
=> Result of a

但正确的顺序应该是——

=> Result of a
=> Result of ab
=> Result of abc

我的尝试 -

我相信这不是极端情况，人们可能已经面对它。让我知道我还能尝试什么。

仅供参考 - 我还阅读了有关 AbortController 的信息，但明确提到它是一种实验性技术，所以我在使用它时有点犹豫。

【问题讨论】：

一种简单的方法是让您的搜索按您想要的任何顺序进行，但在搜索响应中包含搜索请求，并且只显示与当前值匹配的响应。在您的场景中，a 和 ab 搜索的结果将被简单地忽略。其他线索是延迟搜索，以便在用户输入时取消无用的调用（使用 debounce，与 promise 具有相同的支持）。
如果你要找的是订单，你要Promise.each或async/await
通常您会保留对上次发出的请求的引用。当新的搜索出现时，取消现有请求，因为您不再需要该响应。然后发出下一个请求。另见stackoverflow.com/a/37492399/1260204
Promise - is it possible to force cancel a promise的可能重复

【解决方案1】：

在客户端有几种方法可以做到这一点。我知道的最常见的方法是使用 debounce（来自 lodash）

const loadData = (query) => {...}
const debouncedLoadData = debounce(loadData, 200);

有些人提出了对种族的担忧，这是真的。为了使它完美，我们需要实现请求的取消。到目前为止，我可以推荐使用具有建筑取消功能的 axios，https://github.com/axios/axios#cancellation

【讨论】：

【解决方案2】：

在反应中你可以使用钩子，请看this工作示例

【讨论】：