在 JavaScript 中，异步编程是非常常见的，因为 JavaScript 是一门单线程语言，如果在执行耗时操作时阻塞主线程，会导致页面卡顿，用户体验下降。因此，异步编程成为了 JavaScript 中必不可少的一部分。ES9 中的 await 和 async 就是为了更方便地进行异步编程而生的。
什么是异步编程
在 JavaScript 中，异步编程是指在执行一段代码时，不会阻塞主线程的执行，而是把需要等待的操作交给其他线程或者进程去执行，等待操作完成后再回到主线程继续执行。异步编程常见的场景包括：网络请求、定时器、事件监听等。
什么是 await 和 async
在 ES9 中，新增了 await 和 async 两个关键字，用于更方便地进行异步编程。其中，async 关键字用于定义一个异步函数，函数内部可以使用 await 关键字来等待异步操作的完成。
async 函数的定义和使用
async 函数的定义和普通函数类似，只需要在函数前面加上 async 关键字即可。
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}在上面的例子中，fetchData 是一个异步函数，内部使用了 await 关键字等待 fetch 和 response.json 方法的执行完成。
使用 async 函数时，可以像调用普通函数一样调用它，但是需要注意的是，调用 async 函数时，它会返回一个 Promise 对象，因为异步操作可能会失败，所以需要使用 Promise 的 then 方法来处理异步操作的结果。
fetchData().then(data => {
console.log(data);
}).catch(error => {
console.error(error);
});await 关键字的使用
await 关键字只能在 async 函数内部使用，它用于等待一个 Promise 对象的完成，并返回 Promise 对象的结果。
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}在上面的例子中，await 关键字等待 fetch 方法的执行完成，并返回一个 Promise 对象。当 Promise 对象状态变为 fulfilled 时，await 关键字会把 Promise 对象的结果返回给变量 response。
await 和 async 的优势
使用 await 和 async 可以使异步编程变得更加简单和直观，代码可读性更高。它们还可以解决回调地狱的问题，让代码更易于维护和扩展。
-- -------------------- ---- -------
-- ------
------------------------------------- --------------- --------- -
-- ------- -
---------------------
- ---- -
----------------------------- ----- -
-- ------- -
---------------------
- ---- -
------------------
-
---
-
---
-- -- ----- - -----
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-结语
ES9 中的 await 和 async 让异步编程变得更加简单和直观，它们可以为我们的开发工作带来很多便利。但是，在使用它们时需要注意，异步操作可能会失败，需要使用 Promise 的 then 和 catch 方法来处理异步操作的结果。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67da1a2ca941bf71341d28e5