前言
ES7 中的 async 函数在 Promise 的基础上做了很好的扩展，简化了异步编程，并且使代码更加可读和可维护。然而，在使用 async 函数时需要遵守一些规则和注意事项，本文将会详细介绍这些内容。
async 函数的基本用法
一个 async 函数就是一个 Promise 对象的包装，所以我们可以用 then 方法来指定下一步的操作。例如：
async function getUser() {
return 'user';
}
getUser().then(function(user) {
console.log(user);
});当 async 函数执行时，它返回一个 Promise 对象，当函数执行完成时，Promise 对象的状态会变成 resolved。上面的代码中，getUser 函数返回 'user'，它会被 Promise 对象 resolve，并将 'user' 传递给 then 方法中的回调函数。
使用 async 函数来处理异步操作要比使用 Promise 对象更加简单和直观，例如：
async function getUser() {
const response = await fetch('/user');
const user = await response.json();
return user;
}上面的代码使用 fetch 函数来获取 /user 的数据，await 保证了 fetch 和 json 方法的异步执行，当所有操作完成后，getUser 函数会返回一份包含用户信息的 Promise 对象。
async 函数的错误处理
由于 async 函数返回的是 Promise 对象，使用 async 函数的错误处理方式也是相同的，我们可以使用 then 方法的第二个回调函数或 catch 方法来处理错误。例如：
-- -------------------- ---- -------
----- -------- --------- -
----- -------- - ----- ---------------
-- -------------- -
----- --- ----------- ------ ------ - - - -----------------
-
----- ---- - ----- ----------------
------ -----
-
---------
-------------------- -
------------------
--
---------------------- -
---------------------
---上面的代码中，如果 fetch 的响应不是 ok，就会抛出一个错误，并被 catch 捕捉到。
注意事项
- 不要在 async 函数和 Promise 之间混淆使用
async 函数和 Promise 对象有相似的功能和结构，但是它们之间的应用场景和使用方式是不同的，将它们混淆使用可能会导致意想不到的结果。例如：
-- -------------------- ---- ------- ----- -------- --- - ------ -- - ----- - - ---- ------------- ---------- --------- -- ---- ---------------------- - ------------------- -- - ---
运行上面的代码，你会发现 g 是一个 Promise 对象，而不是 async 函数的返回值。同时，f 和 g 的行为也是不一样的，f 是一个异步函数，它会在执行完之后才会返回值，而 g 则会立即返回 Promise 对象。
- async 函数的返回值始终为 Promise 对象
一个 async 函数的返回值始终为 Promise 对象，即使 return 的是一个非 Promise 类型的值。例如：
async function f() {
return 1;
}
f().then(function(value) {
console.log(value); // 1
});上面的代码中，虽然 f 返回的是一个数字类型的值，但是它会被封装成一个 resolved 状态的 Promise 对象。
如果在 async 函数中抛出错误，它同样会返回一个 rejected 状态的 Promise 对象，例如：
async function f() {
throw new Error('Something went wrong!');
}
f().catch(function(error) {
console.error(error); // 'Something went wrong!'
});- async 函数可以使用 try-catch 结构
与同步函数一样，async 函数也可以像下面这样使用 try-catch 结构来处理异常：
-- -------------------- ---- -------
----- -------- --- -
--- -
----- -------- - ----- ---------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
-
-上面的代码中，如果 fetch 或 json 方法的执行出现问题，错误信息将会被 catch 捕获，并输出到控制台中。
- async 函数可以使用 finally 结构
与同步函数一样，async 函数也可以使用 finally 结构来执行清理操作，例如关闭打开的资源：
-- -------------------- ---- -------
----- -------- --- -
--- -
----- -------- - ----- ---------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
---------------------
- ------- -
-----------------
-
-上面的代码中，closeResources 函数将会在 try-catch 处理完之后被执行。
总结
async 函数是一种非常有用的 ES7 特性，它可以使异步编程更加直观和简单。本文详细介绍了 async 函数的基本用法、错误处理、注意事项等内容，并且提供了多个示例代码，希望能对你学习和使用 async 函数有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471b8bd968c7c53b0f996c8