在 ES8 中，新增加了异步函数的概念。异步函数是一种特殊的函数，可以在函数体内部使用 await 关键字来等待一个异步操作完成。异步函数对于编写异步代码来说，是一个非常有用且方便的工具。
然而，异步函数也有一些误用和错误的地方。本文将介绍一些关于异步函数的最佳实践和错误使用方式。同时，本文还将给出一些实际的例子来说明这些观点。
最佳实践
使用 await 关键字
异步函数最大的特点就是可以使用 await 关键字等待异步操作的完成。await 关键字可以让异步代码看起来更像同步代码。例如：
async function getData() {
const result = await fetch('https://api.example.com/data');
const data = await result.json();
return data;
}上面的代码中，getData 函数可以等待 fetch 请求完成，而不需要使用回调函数或 Promise。
多个异步操作组合
异步函数的另一个优点是可以方便的组合多个异步操作。在异步函数内部可以使用 await 等待多个异步操作完成，然后将它们的结果组合起来。
async function getData() {
const result1 = await fetch('https://api.example.com/data1');
const result2 = await fetch('https://api.example.com/data2');
const data1 = await result1.json();
const data2 = await result2.json();
return [data1, data2];
}上面的代码中，getData 函数等待两个请求完成，然后将它们的结果组合成一个数组返回。
错误处理
在异步函数中，错误需要使用 try/catch 语句进行处理，例如：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ------ - ----- --------------------------------------
----- ---- - ----- --------------
------ -----
- ----- ------- -
-------------------- ---------- ------- -------
-
-上面的代码中，如果 fetch 请求出现错误，getData 函数会捕获错误并输出到控制台。
错误的使用方式
没有使用 await 关键字
一个常见的错误就是在异步函数中没有使用 await 关键字。如果没有使用 await 关键字，异步操作的结果将不会被等待，而是直接返回一个 Promise 对象。例如：
async function getData() {
fetch('https://api.example.com/data')
.then(result => result.json())
.then(data => {
console.log(data);
});
}上面的代码中，getData 函数没有使用 await 关键字，而是使用 Promise 的 then 方法来处理异步操作。这种写法虽然也可以实现异步操作，但是与使用 await 关键字相比，代码更加复杂，可读性更差。
连续的 Promise
如果在异步函数中使用了连续的 Promise，代码也会变得复杂和难以阅读。例如：
-- -------------------- ---- -------
----- -------- --------- -
------ -------------------------------------
------------ -- -
------ --------------
--
----------- -- -
------ --------------------------------------
------------- -- -
------ ---------------
--
----------- -- -
------ ------- -------
---
---
-上面的代码中，getData 函数使用了连续的 Promise，代码难以阅读和理解。与之相比，使用 await 关键字可以使代码更加简洁和易读。
不处理错误
在异步函数中，错误处理非常重要。如果没有正确处理错误，可能会导致代码出错、程序崩溃等严重后果。如果异步操作出错，一定要正确处理错误，而不是简单地忽略错误。例如：
async function getData() {
const result = await fetch('https://api.example.com/data');
const data = await result.json();
return data;
}上面的代码中，如果 fetch 请求出现错误，会抛出一个异常，需要使用 try/catch 语句来捕获并处理这个错误。
结论
异步函数是一种非常有用的工具，可以简化异步代码的编写和组织。然而，如果错误使用异步函数，可能会导致代码复杂、难以维护和错误处理不当等问题。因此，在使用异步函数时，请遵循最佳实践，正确处理错误，并尽可能地使用 await 关键字来组合多个异步操作。
示例代码
在本文中的例子中，我们将使用以下的网络请求来展示异步函数的用法：
-- -------------------- ---- -------
-------- ---------- -
------ --- ----------------- ------- -- -
----- --- - --- -----------------
--------------- ---- ------
---------- - -- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- ------------- -- ----- ----------
-
--
----------- - -- -- -
---------- ------------- -- ----- ----------
--
-----------
---
-使用 await 关键字
async function getData() {
const result = await fetch('https://api.example.com/data');
const data = JSON.parse(result);
return data;
}多个异步操作组合
async function getData() {
const result1 = await fetch('https://api.example.com/data1');
const result2 = await fetch('https://api.example.com/data2');
const data1 = JSON.parse(result1);
const data2 = JSON.parse(result2);
return [data1, data2];
}错误处理
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- ------ - ----- --------------------------------------
----- ---- - -------------------
------ -----
- ----- ------- -
-------------------- ---------- ------- -------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752ac6d8bd460d3ad973195