JavaScript基础——深入学习async/await

本文由云+社区发表

本篇文章，小编将和大家一起学习异步编程的未来——async/await，它会打破你对上篇文章promise的认知，竟然异步代码还能这么写! 但是别太得意，你需要深入理解promise后，才能更好的的驾驭async/await，因为async/await是基于promise的。

关于async / await

1. 用于编写异步程序
2. 代码书写方式和同步编码十分相似，因此代码十分简洁易读
3. 基于promise
4. 您可以使用try-catch常规的方法捕获异常
5. es8中引入了async/await，目前几乎所有的现代浏览器都已支持这个特性（除了ie和opera不支持）
6. 你可以轻松设置断点，调试更容易。

从async开始学起

让我们从async关键字开始吧，这个关键字可以放在函数之前，如下所示：

async function f() { 
 return 1; 
}

在函数之间加上async意味着：函数将返回一个promise,虽然你的代码里没有显示的声明返回一个promise,但是编译器会自动将其转换成一个promise，不信你可以使用promise的then方法试试：

async function f() { 
 return 1; 
} 
f().then(alert); // 1

...如果你不放心的话，你可以在代码里明确返回一个promise,输出结果是相同的。

async function f() { 
 return promise.resolve(1); 
} 
f().then(alert); // 1

很简单吧，小编之所以说 async/await 是基于promise是没毛病的，async函数返回一个promise，很简单吧，不仅如此，还有一个关键字await,await只能在async中运行。

等待——await

await的基本语法：

let value=await promise;

该关键字的await的意思就是让js编译器等待promise并返回结果。接下来我们看一段简单的示例：

async function f() { 
 let promise = new promise((resolve, reject) => { 
 settimeout(() => resolve("done!"), 1000) 
 }); 
 let result = await promise; // wait till the promise resolves (*) 
 alert(result); // "done!" 
} 
f();

函数执行将会在 let result = await promise 这一行暂停，直到promise返回结果，因此上述代码将会1秒后，在浏览器弹出“done”的提示框。

小编在此强调下：

• await的字面意思就是让javascript等到promise结束，然后输出结果。这里并不会占用cpu资源，因为引擎可以同时执行其他任务：其他脚本或处理事件。
• 不能单独使用await，必须在async函数作用域下使用，否则将会报出异常“error: await is only valid in async function”，示例代码如下：

function f() { 
 let promise = promise.resolve(1); 
 let result = await promise; // syntax error 
}

接下来，小编将和大家一起来亲自动手实践以下内容：

• async与promise.then的结合,依次处理多个结果
• 使用await替代promise.then，依次处理多个结果
• 同时等待多个结果
• 使用promise.all收集多个结果
• 使用try-catch捕获异常
• 如何捕获promise.all中的异常
• 使用finally确保函数执行

一起动手之前，确保你安装了node,npm相关工具，谷歌浏览器，为了预览代码效果，小编使用 npm install http-server -g 命令快速部署了web服务环境，方便我们运行代码。接下来，我们写一个火箭发射场景的小例子（不是真的发射火箭