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

原创

mb5ff981a16d1dd 2021-01-11 19:21:39 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mb5ff981a16d1dd的原创作品，请联系作者获取转载授权，否则将追究法律责任

大家好，上周我们一起学习了《JavaScript基础——Promise使用指南》, 明白了ES6增加的新特性——Promise让我们能够更加优雅的书写回调函数，清楚了Promise有哪些状态，以及如何编写Promise的相关代码。本篇文章，小编将和大家一起学习异步编程的未来——async/await，它会打破你对上篇文章Promise的认知，竟然异步代码还能这么写! 但是别太得意，你需要深入理解Promise后，才能更好的的驾驭async/await，因为async/await是基于Promise的，没有理解Promise，小编强烈建议各位再看看《JavaScript基础——Promise使用指南》。

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

关于async / await

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

从async开始学起

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

async function f() {
    return 1;
}

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

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

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

Promise

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

等待——await

await的基本语法：

let value=await promise;

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

promise Promiseresult promiseresult

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

小编在此强调下：

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