javascript - .map 异步回调和事件循环

Question

此代码片段取自google developers :

// map some URLs to json-promises
const jsonPromises = urls.map(async url => {
  const response = await fetch(url);
  return response.json();
});

我明白最后jsonPromises将是一系列 Promise。但是，我不完全确定这是如何发生的。

根据我的理解，当执行到这一行const response = await fetch(url);时它将它从调用堆栈移动到 Web Api，与 return response.json(); 执行相同的操作并移至下一个url来自urls 。这是对的吗 ？我了解简单的事件循环是如何工作的 setTimeout ，但是这个例子让我很困惑。

Answer 1

发生的情况是这样的:

1) .map 函数运行，并为每个元素执行回调(异步函数)。该函数调用 fetch，这会在引擎内部启动一些底层魔法。 fetch 返回一个 Promise。到达await，这会停止函数的执行。由 .map 完成的对函数的调用计算结果为一个 promise 。 .map 收集所有这些 Promise 并将它们存储在一个数组中并返回该数组。

2) 有时，在后台运行的 fetch 之一已建立连接，并回调 JS 并解析 fetch promise 。这会导致异步函数调用继续进行。 res.json() 被调用，这会导致引擎从连接中收集所有数据包，并在后台将其解析为 JSON。它再次返回一个 Promise，它会被等待，从而导致执行再次停止。

3) 有时，其中一个连接结束，整个响应将以 JSON 形式提供。 promise 得到解决，异步函数调用继续执行，返回，这导致 promise (数组中的那个)得到解决。