前言

JavaScript是单线程的，这意味着它无法同时执行多个任务，但在日常开发中又不可避免的需要面对大量耗时操作，我们不可能阻塞程序干等在那里，于是就有了异步任务的概念，异步操作能够防止我们的程序阻塞，但一定程度上降低了代码的可读性和可维护性

随着Js的发展，异步操作的发展经历了从回调函数到 Promise，再到Generator，每一次进步都为开发者提供了更强大、更简洁的工具来处理异步操作，改善了代码的可读性和可维护性，在上一篇中，我们已经了解了Generator函数

Generator函数能够使得异步代码看起来像同步代码，但其语法比较复杂，并且其运行必须依赖执行器，无法直接执行，虽然有了co库，能够帮助我们执行，但它的使用需要引入外部库

为了解决Promise及Generator在异步编程中的复杂性，Js在ES2017引入了async/await 语法

Async/Await简介

async关键字用于声明一个异步函数，而await关键字用于暂停异步函数的执行，等待Promise解决，这使得异步代码看起来像同步代码，极大地简化了异步操作的处理

用一句话概括：async 函数就是 Generator 函数的语法糖，是基于Promise实现的

其兼容性如下：

现代化浏览器都是能够很好地支持的

基本语法

假设有一个远程请求数据的栗子，如下：

上述代码，如果用Generator的形式写，如下：

单纯从函数定义实现来看，async函数就是将Generator函数的星号*替换成async放在function前，然后将yield替换成await而已

但是从执行上看，Generator函数无法直接执行，其需要依赖执行器，而async函数则是像普通函数一样直接调用即可

如果我们在控制台打印下asyncFetchData()，可以发现，其会输出一个Promise，这表示async函数会返回一个Promise

实现

简单地理解，async就是一个内置执行器的Generator函数，且结果返回一个Promise

基于这种理解，我们可以使用Generator来实现一个自己的async函数

我们假设有一个myAsync函数，其接收一个Generator函数，需达到与async函数类似效果

• 返回一个Promise
• 内置执行器，像普通函数一样调用

使用时如下：

错误处理

async函数提供了一种更直观的方式来处理异步操作，同时其错误处理也变得更加简洁和清晰

与普通的同步函数一样，async函数可以使用try...catch块来捕获错误；此外，由于其返回一个Promise，这意味着它还可以使用.catch()方法来处理错误

try...catch 处理错误

在async函数内部，可以使用try...catch结构来捕获await表达式中的任何错误

.catch() 处理错误

通过Promise的方式，使用.catch()方法来处理错误

这种方法特别适合在函数调用链的末尾处理错误

如果在async函数内部抛出错误，其会被自动包装为被拒绝reject的Promise，可被try...catch或.catch()捕获

由于其返回Promise的特性，我们在处理时还可以用finally做一些清理操作，比如释放资源或关闭连接等

优点

简化代码：async/await提供了类似同步代码的语法结构，使得异步代码更易读、易写

内置执行器：async函数自带执行器，执行时与普通函数一模一样，直接调用即可

错误处理：通过try...catch来捕获异步操作中的错误，集中化的错误处理，更加直观

语义清晰：比起星号*和yield，async和await的语义更清楚；async表示是异步函数，await表示需等待紧跟在后面的表达式返回结果

广泛支持：现代浏览器和Node.js都支持async/await，因此它很快成为处理异步操作的标准方法

总结

对比以往的异步操作方式，async/await提供了一种更简洁、直观的方式；它基于Promise，又结合了Generator的特点，使得编写异步代码的体验与同步代码相似；它的出现，大大简化了JavaScript中异步代码的编写和管理，使代码更易于阅读、调试和维护，适用于各种异步场景，是现代JavaScript编程中的重要工具