在编写代码时，错误处理是最重要的部分。特别是在处理网络请求和异步函数时，错误可能是致命的，而且可能导致整个代码崩溃。这种错误处理需要一种机制来捕获和处理。
在 ECMAScript 2017（ES8）中引入了一种新的语言结构 async/await ，它可以使异步函数更易于捕获和处理错误。在本篇文章中，我们将讨论使用 async/await 处理致命和非致命错误的最佳实践。
async/await 简介
async/await 是一种 JavaScript 的语言结构，它使得异步代码可以像同步代码一样易于编写和理解。 在一个异步函数中使用了 async 关键字，这个函数返回一个 Promise 对象。 在这个函数中我们可以使用 await 关键字处理异步操作的结果，它将停止执行函数，直到 Promise 对象被解决。
下面是一个简单的例子，使用 async/await 来调用一个 Promise 对象。
----- -------- -------------- -
--- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
-------------------
-
-
---------------从这个例子中，你可以看到 try/catch 语句块被用来捕获异步操作的错误。这使得我们能够更好地处理这些错误，并在出现问题时执行必要的操作。
错误类型
在编写代码时需要了解两种类型的错误，这将有助于理解何时应该处理错误。
1. 致命错误
致命错误是指那些会导致整个程序崩溃的错误。这些错误通常包括类型错误（如无效的对象引用），网络错误 (例如请求超时)，语法错误等。遭遇致命错误可能无法计划，因此我们需要对其进行适当的错误处理。
2. 非致命错误
非致命错误是指那些不会导致整个程序崩溃，但会影响代码的执行和项目的进程。这些错误可能由于网络延迟，服务不可用，无效的请求而导致。在这些情况下，我们还需要处理错误，确保程序能够继续执行。
错误处理最佳实践
在使用 async/await 模式进行错误处理时，以下为你提供一些最佳实践指南。
Tip 1：使用 try/catch 捕捉错误
在异步函数中，可以使用 try/catch 语句块捕捉错误，这样就可以更好地控制程序中的错误。在函数中使用 try/catch 语句块时，可以确保当异步操作失败时，程序不会崩溃。
----- -------- ------------ -
--- -
----- -------- - ----- -----------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
------------------ ------- -----------
-
-在上面的代码中，getSize 函数中的 fetch 和 size 方法可能会抛出错误。 使用 try/catch 能够捕捉到这些错误，即使有错误发生时，函数也不会崩溃。
Tip 2：使用 Promise.reject 抛出错误
在某些情况下，可能需要在异步函数中抛出错误。在 async/await 模式中，你可以使用 throw new Error 或 throw 语句，但是使用 Promise.reject 会更简洁。在异步函数中使用 Promise.reject 会有助于代码的可读性，因为它可以明确地表达错误的发生。
例如，在下面的代码中，我们将在获取数据出现错误时返回一个拒绝的 Promise 对象：
----- -------- ----------------- -
--- -
----- -------- - ----- ----------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
------ ----------------------
-
-在上面的代码中，如果有任何异常出现，都会使用 Promise.reject 抛出一个拒绝的 Promise 对象。然后，该 Promise 对象可以被调用端捕捉和处理。
Tip 3：使用 Promise.all 捕捉多个 Promise 对象的错误
当同时运行多个 Promise 对象时，可能会遇到一种情况，即其中一个 Promise 对象失败后，其他 Promise 对象继续执行。 为了防止这种情况发生，我们可以使用 Promise.all 方法，当多个 Promise 对象全部成功或全部失败时，它会返回一个新的 Promise 对象。
在下面的代码示例中，我们同时发起多个异步请求，然后等待它们全部完成。这个异步函数返回所有请求的结果。 当有一个异步请求出现错误时，该函数可以处理所有错误。
----- -------- ---------- -
----- ---- - -
-----------------------------------------------
-----------------------------------------------
-----------------------------------------------
--
--- -
----- ------- - ----- ------------
-------------- ----- -- -
----- -------- - ----- -----------
------ ----------------
--
--
---------------------
- ----- ------- -
-------------------
-
-
-----------在上面的代码中，当有一个 Promise 对象返回错误时，Promise.all 会抛出一个错误。发生错误时，我们可以在 try/catch 块中处理错误。
示例代码
下面的代码演示如何使用 async/await 处理错误。 在该示例中，我们使用 async/await 下载多个图像。 如果任何图像下载失败，该函数将抛出错误。
----- -------- ---------------------- -
--- -
----- ------ - ----- ------------
---------------- ------- -- -
----- -------- - ----- -----------------
-- -------------- -
----- --- ----------- ------ ------ ---------------------
-
----- ---- - ----- ----------------
------ -
----- -----------
---- --------------------------
--
--
--
--------------------
- ----- ------- -
------------------ ------- -----------
-
-
----- ------ - -
- ----- --------- ---- ------------------------------------ --
- ----- --------- ---- ------------------------------------ --
- ----- --------- ---- ------------------------------------ --
- ----- --------- ---- ------------------------------------ --
- ----- --------- ---- ------------------------------------ --
- ----- --------- ---- ------------------------------------ --
--
-----------------------在上面的代码中，downloadImages 函数使用 async/await 调用多个异步 fetch 请求并等待它们全部完成。 如果其中一个请求返回响应状态码不是 200（即一个致命错误），则会抛出 HTTP 错误。
结论
使用 async/await 模式能够更好地处理异步函数的错误。本文阐述了处理致命和非致命错误的最佳实践。 每当使用 async/await 处理函数返回的 Promise 对象时，都应该考虑错误处理并选择适当的错误处理机制。 通过遵循这些最佳实践，可以保证 JavaScript 异步函数更可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6732cecd0bc820c5823ef793