javascript - 如何异步多次调用 promise 函数以用给定数量的值填充数组？

Question

我有一个 promise 函数，它可以成功地返回一个介于最小值和最大值之间的随机整数。

const getRandomValue = (min = 0, max = 1) => {
  return new Promise(function(resolve, reject){
    let randomInteger = Math.floor(Math.random() * (max - min)) + min;
    resolve(randomInteger);
  });
};

我正在尝试使用此 promise 函数异步填充数组，其中包含 4 个随机整数。

通话的时间顺序对我来说是一个挑战，我对这种类型的编程是全新的。以下是我一直在尝试但没有成功的工作。

  const getFourRandomValues = (min, max) => {
    let randomIntegerArray = [];
    for(let i = 0; i < 4; i++){
      getRandomValue(20,30).then(x => console.log(x));
      getRandomValue(20,30).then(x => {
        randomIntegerArray.push(x)
      });
    }
    return randomIntegerArray;
  };

console.log(getFourRandomValues());

有经验的程序员肯定知道，它会产生:

[]
22
29
25
21

非常感谢所有帮助

Answer 1

请注意，如果您执行异步操作，则只有在同步代码之后才会解析或拒绝，这就是为什么在您的示例中您得到一个空数组。您可以使用 Promise.all 轻松避免它，我推荐它用于您的情况，因为您正在使用多个异步调用。

逻辑如下:

1. 将每个异步调用推送到数组中。

2. 调用Promise.all(arrayOfPromises)

3. 通过 .then() block 处理结果(在 then 中，如果每个调用都成功解析，您可以访问每个调用的结果)

这是一个例子:

const getRandomValue = (min = 0, max = 1) => {
  return new Promise(function(resolve, reject){
    let randomInteger = Math.floor(Math.random() * (max - min)) + min;
    resolve(randomInteger);
  });
};

const getFourRandomValues = (min, max) => {
  let promises = [];
  for(let i = 0; i < 4; i++) {
    promises.push(getRandomValue(20,30));
  }
  return Promise.all(promises);
}

getFourRandomValues()
  .then(x => console.log(x));