在 JavaScript 的漫长历史中，处理异步代码是前端开发人员最痛苦的事情之一。在过去，我们使用原始的回调函数和 Promise 进行异步操作，而这些方法都需要写大量复杂的代码来处理异步操作。幸运的是，ES8 引入了一种新的语法，它可以使我们更容易地处理异步代码——async/await。
什么是 async 和 await
async/await 是新的一对 JavaScript 关键字，它简化了对异步代码的处理，使代码更易读和理解。async 关键字表示函数是异步的，而 await 关键字表示代码将等待异步操作完成后才继续执行。
在 async 函数内部，使用 await 来等待一个异步操作的结果。它暂停函数的执行，直到异步操作完成并返回结果。在等待异步操作期间，JavaScript 运行时可以转移控制，让其他代码运行，直到异步操作完成。
如何使用 async 和 await
下面是一个简单的使用 async 和 await 的示例，其中我们通过调用 setTimeout 函数来模拟一个异步操作：
async function myFunction() {
console.log('开始异步操作...');
await new Promise(resolve => setTimeout(resolve, 2000));
console.log('异步操作完成！');
}
myFunction();这里，我们定义了一个简单的 async 函数 myFunction，它等待两秒钟后打印一条消息。我们使用 await 来等待 setTimeout 函数的执行完成，以确保打印消息的代码在异步操作完成之后才被执行。
async 和 await 的优势
更易读和理解：使用 async/await，我们的代码更加直观和易于理解。它隐藏了回调和 Promise 的嵌套，并用类似同步代码的方式来处理异步操作。
更容易处理错误：使用 try/catch 块可以轻松地实现异步操作中的错误处理。这比处理 Promise 的错误更加简单。
更好的调试支持：由于 async/await 让我们的代码更加直观，因此在调试代码时更容易跟踪异步代码的执行。
下面是使用 async/await 处理异步操作的示例代码。我们使用 axios 库来发出 HTTP 请求，并打印响应结果：
-- -------------------- ---- -------
----- ----- - -----------------
----- -------- ------------- -
--- -
----- -------- - ----- ----------------------------------------------------------
---------------------------
- ----- ------- -
---------------------
-
-
--------------结论
async 和 await 是处理异步代码的一种更为简便和可读的方式。使用它们可以减少代码中的回调和 Promise 嵌套，使代码更易于理解和维护。在使用 async/await 时，需要注意安排异步代码的执行顺序，并使用 try/catch 块来处理错误。但是，如果使用得当，async/await 可以从根本上改变 JavaScript 开发的方式，并使我们更有效地处理异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bb827d657e1f70dbaeb6d