【问题标题】:JavaScript async/await for Promises inside Array.map() [duplicate]JavaScript异步/等待Array.map()中的Promises [重复]
【发布时间】:2016-12-06 07:18:14
【问题描述】:

给定以下代码

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 版本?

这个问题与How to return the response from an asynchronous call 不同,因为它是关于如何返回包装在Array.map 中的批处理响应。

【问题讨论】:

  • 具体往this answer底部看
  • @Liam 我已经在使用提到的 ES7 async/await 语法。仅当 Array.map 覆盖它们时才会出现问题。 const X = await Array.map(...) 似乎还没有实现。
  • 你只能await一个promise,而不是一个数组。试试await Promise.all(array)

标签: javascript async-await babeljs es6-promise ecmascript-next


【解决方案1】:

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

Bluebird好像有这样一个功能叫Promise.map

同样有一个名为 Promise.all 的本机实现,它创建了一个“批量 Promise”

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

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);

  }
}

【讨论】:

  • 箭头函数本身也必须是异步的。
  • "it's working" --- 这值得怀疑,因为它有语法错误。
  • 抱歉,是的,箭头函数需要异步。我已经修复了代码
【解决方案2】:

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

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));

【讨论】:

  • 是的,但我一直在寻找并行执行。您不希望看到您的浏览器将数据一一加载到 UI 中。
  • @TobiasMühl 好的,最好在问题本身中提及这类事情。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-04-17
  • 2019-10-29
  • 1970-01-01
  • 1970-01-01
  • 2019-06-29
  • 1970-01-01
相关资源
最近更新 更多