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,不信你可以使用Promisethen方法试试:

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服务环境,方便我们运行代码。接下来,我们写一个火箭发射场景的小例子(不是真的发射火箭

上一篇:virtualenv 在windows下的简单应用


下一篇:Windows下如何采用微软的Caffe配置Faster R-CNN