Array.map()中的Promises的JavaScript异步/等待

JavaScript async/await for Promises inside Array.map()

本文关键字:JavaScript 异步 等待 Promises map 中的 Array      更新时间:2023-09-26

给定以下代码

class SomeClass {
  async someFunc() {
    const urlParameters = [0, 1, 2];
    const batchAjaxResult = await urlParameters.map((parameter) => { 
        const result = await $.get(`someUrl/${parameter}`);
        return {
          parameter,
          result
        }
     });
  console.log(batchAjaxResult);
  }
}

JavaScript将返回一个已解析Promises的数组,而不是实际的Promises结果。

这可能是由于Array.map()没有作为Promise实现。

有基于Promise的Array.map版本吗?

这个问题不同于如何从异步调用返回响应,因为它是关于如何返回封装在Array.map中的批处理响应。

您可以使用这个简单的函数来链接承诺以实现顺序执行:

function asyncMap(arr, mapper) {
  var q = Promise.resolve();
  return Promise.all(arr.map(v => q = q.then(() => mapper(v))));
}
// Usage
asyncMap([1, 2, 3], v => {
  return new Promise(resolve => {
    console.log("Start " + v);
    setTimeout(() => {
      console.log("End " + v);
      resolve("foo" + v);
    }, 500);
  });
}).then(a => console.log(a));

通过写这个问题,我设法找到了问题的根源。

蓝鸟似乎有一个叫做Promise.map 的功能

类似地,有一个名为Promise.all的本地实现,它创建了一个"批量承诺"

我更改了如下代码,它正在工作:

class SomeClass {
  async someFunc() {
      const urlParameters = [0, 1, 2];
      const batchAjaxResult = await Promise.all(
          urlParameters.map(async (parameter) => {
            const result = await $.get(`someUrl/${parameter}`);
            return {
              parameter,
              result
            }
         })
      );
      console.log(batchAjaxResult);
  }
}