在前端开发中，异步编程是非常常见的。在过去，我们通常使用回调函数、Promise 或者 Generator 函数来实现异步编程。不过在 ECMAScript 2017 (ES8) 中，新增了 async 和 await 关键字，使得异步编程变得更加简洁、易读，并且使用起来更加方便。
异步函数 async
使用 async 关键字可以定义一个异步函数。异步函数内部可以使用 await 来等待其他异步函数的返回结果，而在等待期间该函数会挂起并等待异步操作完成。
下面是一个基本的异步函数的示例：
async function asyncFunction() {
let result = await getSomeDataFromServer();
console.log(result);
}该函数中的 getSomeDataFromServer() 是一个异步函数，因此我们使用 await 关键字等待其返回结果。在等待过程中，该函数会挂起并等待异步操作完成。
异步函数的返回值是一个 Promise 对象，该对象的结果和返回值是异步函数的返回值。下面是一个使用异步函数的示例：
-- -------------------- ---- ------- ----- -------- --------- - --- -------- - ----- -------------------------------------- --- ---- - ----- ---------------- ------ ----- - ----------------------------- - ------------------ ---
在上面的示例中，fetch() 函数返回的是一个 Promise 对象，我们使用 await 等待其返回结果，并将结果转化为 JSON 格式。
await 关键字
await 关键字用于等待一个异步操作的结果，直到该异步操作完成并返回结果后，再继续执行后面的代码。在等待过程中，异步函数会被挂起，并等待异步操作完成。
下面是一个使用 await 的示例：
async function asyncFunction() {
let result = await getSomeDataFromServer();
console.log(result);
}在这个示例中，await 等待 getSomeDataFromServer() 函数执行完成并返回结果，然后将结果保存到 result 变量中。
如果 await 关键字等待的对象是一个 Promise 对象，那么该 Promise 对象的结果将作为结果返回。如果等待的对象是一个其他类型的值，那么该值将会被转化为 Promise 对象并作为结果返回。
下面是一个使用 await 的示例：
async function asyncFunction() {
let result = await Promise.resolve('Hello World');
console.log(result);
}在这个示例中，await 等待 Promise.resolve() 函数执行完成，并将结果保存到 result 变量中。由于 Promise.resolve() 函数的返回值是一个 Promise 对象，因此当 await 等待 Promise.resolve() 函数的返回结果时，该 Promise 对象的结果将会作为异步函数的返回结果。
异步函数的错误处理
异步函数内部可以使用 try-catch 语句来捕获和处理异步操作的错误。如果异步操作抛出了异常或者出现了错误，那么该异常或者错误将会被 catch 语句捕获。
下面是一个使用 try-catch 语句捕获异步操作错误的示例：
async function asyncFunction() {
try {
let result = await getSomeDataFromServer();
console.log(result);
} catch (error) {
console.error(error);
}
}在这个示例中，try-catch 语句用于捕获异步操作出现的错误或者异常，如果异步操作出现错误或者异常，那么该错误或者异常将会被 catch 语句捕获，然后在控制台中输出。
总结
使用异步函数、async 和 await 关键字可以让异步编程变得更加方便和易读。异步函数的返回值是一个 Promise 对象，而 await 关键字用于等待异步操作完成并返回结果。在异步函数内部可以使用 try-catch 语句来捕获和处理异步操作的错误。
下面是一个完整的示例代码：
-- -------------------- ---- -------
----- -------- --------- -
--- -
--- -------- - ----- --------------------------------------
--- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-
----------------------------- -
------------------
---在这个示例中，我们使用异步函数的方式获取数据，并在控制台输出结果，同时使用 try-catch 语句捕获异步操作出现的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f999c0f6b2d6eab3113ae2