每当解决承诺时如何附加到状态？

Question

我正在寻找一种 whenever 类型的承诺助手。让我们使用Promise.All 函数。 我有4个承诺。二是瞬间速度。一是快。一是慢。缓慢的承诺需要 3 秒才能解决。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'slow');
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
  // here I want to setState()
  // this.setState({values})
});

// output: Array [3, "slow", "foo"]

当我运行代码时，all 将等待所有承诺（所以 3 秒）然后显示数组。这遵循文档：

Promise.all() 方法将一个可迭代的 Promise 作为输入，并返回一个 Promise，该 Promise 解析为输入 Promise 的结果数组。 当所有输入的 Promise 都已解决时，此返回的 Promise 将解决，或者如果输入的可迭代对象不包含任何 Promise。它会在任何输入的 Promise 被拒绝或 non-Promise 抛出错误时立即拒绝，并会以第一个拒绝消息/错误来拒绝。

强调是我的

现在我正在寻找一种方法，该方法将返回一个承诺，然后在输入的承诺之一已解决时解决。

类似：

Promise.whenever([promise1, promise2, promise3]).then((value) => {
  console.log(value);
  // here I want to setState()
  // this.setState({values: this.state.values.concat([value])})
});

谁来打印

3
foo
slow

promise all

setState

Answer 1

我没有找到任何原生的whenever，但是你基本上可以用forEach和一个高阶函数来构建它。

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'slow');
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

const PromiseWhenever = (promises, action, rejectionAction) => {
  promises.forEach(promise => {
    promise.then(action).catch(rejectionAction);
  });
}

PromiseWhenever([promise1, promise2, promise3], value => console.log(value), () => console.error("failed"))

现在如果你想要Promise.Whenever，你必须编辑Promise 的原型。值得吗？

对于setState，它将按您的预期工作：

PromiseWhenever([promise1, promise2, promise3], value =>
    this.setState({ values: this.state.values.concat([value]) }, () => console.error("failed"))

与How do I resolve multiple promises as they resolve? 和setState inside promise.all() react 相关