防止同时调用同一个 Promise / async 函数

Question

情况

我有一个异步函数，需要 ~X seconds 来解析。持续时间取决于网络延迟，因此无法预测。该功能由用户输入触发（想想“将当前表单值保存到服务器”）

我想阻止这个函数同时运行多次。

我还想对函数的调用“排队”，以便在适当的时候调用。

问题

(A)“耐心”异步函数的概念是否有一个术语。

(B) 是否有一种工具（类似于debounce）可以采用异步函数并将其转换为“耐心”函数。

Answer 1

此答案基于answer by @danh。

函数queuePromise 接受一个返回promise 的函数。每当调用队列函数时，它的 promise 都会链接到前一次调用的 promise。

@danh 的回答与 this 的主要区别在于 queued 函数可以接收参数，promise 是一个简单的let 变量。

const queuePromise = fn => {
  let pending = Promise.resolve()
  return (...args) => {
    const func = () => fn(...args)
  
    return pending = pending.then(func, func)
  }

}

const demo = name => id => {
  console.log(`started ${name} ${id}`)
  
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // example of a failed promise in the middle of the chain
      if(id === 2) reject(`failed ${name} ${id}`)
      else resolve(`ended ${name} ${id}`)
    }, 500)
  })
}

const patientFoo = queuePromise(demo('foo'))
patientFoo(1).then(console.log).catch(console.log)
patientFoo(2).then(console.log).catch(console.log)
patientFoo(3).then(console.log).catch(console.log)

const patientBar = queuePromise(demo('bar'))
patientBar(1).then(console.log).catch(console.log)
patientBar(2).then(console.log).catch(console.log)
patientBar(3).then(console.log).catch(console.log)

Answer 2

下面，makePatient 将给定函数包装在另一个函数中，该函数仅在之前的调用链得到解决后才调用它。

function pause() {
  return new Promise(resolve => {
    setTimeout(resolve, 1000)
  })
}

function foo(str) {
  return pause().then(() => console.log(str));
}

function bar(str) {
  return pause().then(() => console.log(str));
}

function makePatient(fn) {
  let pending = Promise.resolve();

  return (...params) => {
    return pending = pending.then(() => fn(...params)).catch(console.log);
  }
}

let patientFoo = makePatient(foo);
let patientBar = makePatient(bar);

patientFoo('foo');
patientFoo('foo');
patientFoo('foo');

patientBar('bar');
patientBar('bar').finally(() => console.log("all the bars are closed"));