随着 JavaScript 语言的发展，async/await 已成为异步编程的主流方案，它可以使异步代码更加清晰和易于管理。但在实际使用中，可能会遇到一些问题。本篇技术文章将讨论这些问题和解决方案，并提供示例代码。
错误一：没有使用 try/catch 捕获异常
在使用 async/await 进行异步编程时，一定要使用 try/catch 捕获异常。如果没有捕获异常，程序将终止，并且可能无法发现错误原因。
以下是一个错误示例代码，没有使用 try/catch 捕获异常：
async function fetchData() {
const response = await fetch('https://api.github.com/users/octocat');
const data = await response.json();
return data.bio;
}
const bio = fetchData();
console.log(bio);在这个例子中，如果请求发生错误，控制台将显示 Uncaught (in promise) TypeError: Failed to fetch，而且程序将终止，因为没有捕获异常。
下面是一个正确的示例代码，使用 try/catch 捕获异常：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------------------
----- ---- - ----- ----------------
------ ---------
- ----- ------- -
---------------------
------ -----
-
-
----- --- - ------------
-----------------在这个例子中，如果请求发生错误，catch 内部的代码将被执行，并打印错误到控制台。程序继续运行，并返回 null。
错误二：没有正确处理 Promise 的状态
另一个常见的错误是没有正确处理 Promise 的状态。如果 Promise 被拒绝（rejected），并且没有使用 try/catch 捕获异常，程序将终止。如果没有正确处理 Promise 的状态，可能会导致程序崩溃。
以下是一个错误示例代码，没有正确处理 Promise 的状态：
-- -------------------- ---- ------- ----- -------- ----------- - ----- -------- - ----- ---------------------------------------------- ----- ---- - ----- ---------------- ------ --------- - -------------------- -- - ----------------- ---
在这个例子中，在调用 fetchData 函数时，如果请求失败会返回一个被拒绝的 Promise，但是没有捕获这个异常。如果在 then 方法中使用被拒绝的 Promise，程序将终止。
下面是一个正确的示例代码，正确处理 Promise 的状态：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- ----------------------------------------------
----- ---- - ----- ----------------
------ ---------
-
-----------
--------- -- -
-----------------
--
------------ -- -
---------------------
---在这个例子中，使用 catch 方法，正确处理 Promise 的状态，即使发生错误，程序也会继续运行。
错误三：使用 return 返回 Promise
在 async/await 中，使用 return 语句返回值，实际上是在使用 Promise.resolve() 方法返回一个 Promise 对象。如果在异步函数中返回一个 Promise，它将在外部的 Promise 链中创建一个新的 Promise。
以下是一个错误示例代码，使用 return 返回 Promise：
async function fetchData() {
return await fetch('https://api.github.com/users/octocat');
}
const response = fetchData();
console.log(response);在这个例子中，使用 return 返回 Promise，console.log(response) 的输出值将是一个 Promise 对象，而不是响应结果。
下面是一个正确的示例代码，直接返回值：
async function fetchData() {
const response = await fetch('https://api.github.com/users/octocat');
return response;
}
const response = fetchData();
console.log(response);在这个例子中，直接返回响应结果，console.log(response) 的输出值将是响应结果。
总结
在使用 async/await 进行异步编程时，需要注意以下几点：
- 一定要使用
try/catch捕获异常； - 一定要正确处理 Promise 的状态，即使用
catch方法； - 不要使用
return返回 Promise，直接返回值。
遵守这些约定，可以使 async/await 更加简单和容易维护。
示例代码：https://github.com/lareina2021/Solve-errors-when-using-ES7-async-await
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed8d24f6b2d6eab37b284b