当函数包含异步操作时，如何按顺序触发对同一函数的多次调用

Question

我正在处理竞争条件，并试图找出解决方法。

我有多段代码调用同一个函数。此函数在 API 端点上调用 fetch 并根据结果进行 DOM 修改。可以在页面加载时或响应用户操作时调用该函数。用户可能会多次触发函数调用。

如果稍后调用的 DOM 修改发生在较早调用的修改之前，事情就会出错，这种情况偶尔会发生。

是否有一种通用模式可确保这些 DOM 修改按顺序进行，即使提取调用没有按顺序进行？

我正在考虑创建某种队列，在调用方法时将带时间戳的行添加到数组中，然后在获取完成时将 fetch 结果附加到该行，然后 make时间戳列表中的所有 DOM 修改，直到我命中一行而没有结果。这是否有意义，或者我在这里缺少现成的解决方案或通用模式？

function getContent() {
    fetch(url)
        .then((response)) => modifyDOM(); // Make this part run in sequence.
}

// for reasons not shown here, the first call takes so long that the second one
// completes its DOM modification first. This race condition breaks my content.
getContent();
getContent();

Answer 1

您可以跟踪在调用函数时重新分配给新请求的持久性 Promise：

let prom = Promise.resolve();
function getContent() {
    const promToReturn = prom
      .then(() => fetch(url))
      .then(modifyDOM);
    // continue the chain even if there's an error during one of them
    prom = promToReturn.catch(() => undefined);
    // while returning the original Promise whose results and errors can be seen outside
    return promToReturn;
}

这样，任何时候最多只会有一个请求在进行。对 getContent 的顺序调用一次只会导致一个正在进行的请求。 getContent(); getContent(); 将产生一个请求，完成并修改 DOM，然后在完成后，另一个请求修改 DOM.

当函数包含异步操作时，如何按顺序触发对同一函数的多次调用

How to make multiple calls to the same function fire in order, when function includes asynchronous actions

javascript

asynchronous

race-condition