await 的用法

Question

写法1

// 
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

写法2

let foo = await getFoo();
let bar = await getBar();

为什么 写法1是可以并行执行的，写法二就是不是

Answer 1

每产生一个 Promise，就是触发，每写一个 await，就是等待

let fooPromise = getFoo();   // 触发
let barPromise = getBar();   // 触发
let foo = await fooPromise;  // 等待
let bar = await barPromise;  // 等待

let foo = await getFoo();   // 触发+等待
let bar = await getBar();   // 触发+等待

来看《理解 JavaScript 的 async/await》

Answer 2

let fooPromise = getFoo(); // 启动 foo 处理
let barPromise = getBar(); // 启动 bar 处理
let foo = await fooPromise; // 等待 foo 处理结束
let bar = await barPromise; // 等待 bar 处理结束

let foo = await getFoo(); // 启动 foo 处理，并等待其处理结束
let bar = await getBar(); // 启动 bar 处理，并等待其处理结果

所有，前一个 bar 在等待 foo 结束之前已经启动了，所以有并行的可能。后一个启动 bar 时 foo 的处理一定已经结束了，一定是串行的。

Answer 3

因为 Promise 创建之后就开始执行，所以写法1 里面，两个函数都已经在执行了，后面只是获取结果时，在等待 Promise 完成。而写法2 getBar() 必须在 getFoo() 完成之后才执行。