javascript - 了解放置 `await` 关键字的位置

Question

为了确保我了解 async/await 的工作原理，我想确认一些事情。让我先创建几个函数:

let resolveAfter2Seconds = () => {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(20);
      console.log("slow promise is done");
    }, 2000);
  });
};

let resolveAfter1Second = () => {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fast promise is done");
    }, 1000);
  });
};

现在以这两段代码为例:

let concurrentStart = async () => {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds();
  const fast = resolveAfter1Second();

  console.log(await slow);
  console.log(await fast);
}

现在，以上是否在功能上等同于此:

let concurrentStart = async () => {
  console.log('==CONCURRENT START with await==');
  const slow = await resolveAfter2Seconds();
  const fast = await resolveAfter1Second();

  console.log(slow);
  console.log(fast);
}

换句话说，我可以将 await 关键字放在函数调用 await resolveAfter25Seconds() 之前，或者...我可以将 await 放在控制台中触发该函数触发的日志 - console.log(await slow);。

结果是否相同，因为 async/await 在两种情况下都以相同的方式工作——在这种情况下，您可以使用任何一种方法完成相同的事情？

Answer 1

他们的行为不同；您的第一个示例运行两秒钟，第二个示例运行三秒钟。

第一种情况允许slow和fast并行启动；在第二种情况下，您甚至在开始第二个 promise 之前就强制执行第一个 promise 。

在没有 await 的情况下启动许多 promise 的真实用例是，如果您想并行获取多个 URL。

// assuming getUrlContents() returns a Promise
let promises = [
    getUrlContents('http://url1.com/'),
    getUrlContents('http://url2.com/'),
    getUrlContents('http://url3.com/')
];

// all URLs are currently fetching

// now we wait for all of them; doesn't particularly matter what order
// they resolve
let results = [
    await promises[0],
    await promises[1],
    await promises[2]
];

这个的另一种变体会运行得更慢(通常不是你想要的，除非你真的需要一个的内容才能继续下一个):

let a = await getUrlContents('http://url1.com/')
let b = await getUrlContents('http://url2.com/')
let c = await getUrlContents('http://url3.com/')
let results = [ a, b, c ];

b 的下载直到 a 完成后才会开始，依此类推。