带有异步/等待的 map() 函数 [英] map() function with async/await

问题描述

已经发布了很多关于 async/await 在 javascript map 函数中的行为的主题，但是，下面两个示例中的详细说明会很好:

There is quite some topics posted about how async/await behaves in javascript map function, but still, detail explanation in bellow two examples would be nice:

  const resultsPromises = myArray.map(async number => {
    return await getResult(number);
  });

  const resultsPromises = myArray.map(number => {
    return getResult(number);
  });

这当然是一个虚构的案例，所以刚刚开始辩论，为什么，如何以及何时映射函数等待等待关键字.解决方案如何修改这个例子，调用 Promise.all() 不是这个问题的目的.
getResult 是一个异步函数

edited: this if of course a fictional case, so just opened for debate, why,how and when should map function wait for await keyword. solutions how to modify this example, calling Promise.all() is kind of not the aim of this question.
getResult is an async function

推荐答案

其他答案已经很好地涵盖了示例行为的细节，但我想尝试更简洁地说明它.

The other answers have pretty well covered the details of how your examples behave, but I wanted to try to state it more succinctly.

const resultsPromises = myArray.map(async number => {
  return await getResult(number);
});

const resultsPromises = myArray.map(number => {
  return getResult(number);
});

1. Array.prototype.map 同步循环遍历数组并将每个元素转换为其回调的返回值.

1. Array.prototype.map synchronously loops through an array and transforms each element to the return value of its callback.

两个例子都返回一个Promise.

Both examples return a Promise.

• async 函数总是返回一个 Promise.

getResult 返回一个 Promise.

因此，如果没有错误，您可以在伪代码中将它们视为:

Therefore, if there are no errors you can think of them both in pseudocode as:

const resultsPromises = myArray.map(/* map each element to a Promise */);

1. 如zero298所述和alnitak 演示了，这非常快速(同步)按顺序启动每个承诺；但是，由于它们是并行运行的，因此每个 promise 都会按照他们认为合适的方式解决/拒绝，并且可能不会按顺序解决(实现或拒绝).

1. As zero298 stated and alnitak demonstrated, this very quickly (synchronously) starts off each promise in order; however, since they're run in parallel each promise will resolve/reject as they see fit and will likely not settle (fulfill or reject) in order.

并行运行 Promise 并使用 Promise.all 收集结果，或者使用 for * 循环 或 Array.prototype.reduce.p>

Either run the promises in parallel and collect the results with Promise.all or run them sequentially using a for * loop or Array.prototype.reduce.

或者，您可以将第三方模块用于可链接的异步 JavaScript 方法保持清理并——也许——使代码符合你对异步地图的直觉 操作可能有效:

Alternatively, you could use a third-party module for chainable asynchronous JavaScript methods I maintain to clean things up and--perhaps--make the code match your intuition of how an async map operation might work:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const getResult = async n => {
  await delay(Math.random() * 1000);
  console.log(n);
  return n;
};

(async () => {
  console.log('parallel:');
  await AsyncAF([1, 2, 3]).map(getResult).then(console.log);
  
  console.log('sequential:');
  await AsyncAF([1, 2, 3]).series.map(getResult).then(console.log)
})();

<script src="https://unpkg.com/async-af@7.0.12/index.js"></script>

这篇关于带有异步/等待的 map() 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！