在前端开发中，异步操作是非常常见的。然而，异步错误的处理却是一件棘手的问题。在这篇文章中，我们将介绍如何使用 try-catch 及 Promise.reject 优雅的处理异步错误。
try-catch 处理同步错误
在传统的编程模式中，我们会使用 try-catch 来处理同步的错误。比如下面的代码：
try {
// do something that can throw an error
} catch (error) {
// handler the error
}在这个代码块中，如果 try 中的操作出现了错误，就会执行 catch 块中的代码。
异步错误处理的挑战
但是，在异步中，try-catch 并不能很好地处理错误。这是因为异步代码的执行顺序是不确定的。当一个异步操作抛出错误时，try-catch 并不能够捕获它，因为它并不在当前的执行上下文中。
一个最常见的例子就是在 AJAX 请求中。比如这个表单提交：
-- -------------------- ---- -------
----- ------------ - -----------------------------------------
-------------------------------------- -- -- -
----- --- - --- -----------------
---------------- -------------- ------
---------------------- - ---------- -
-- --------------- --- -------------------- -
-- ----------- --- ---- -
------------------------------
- ---- -
-- ------ ----- ----
-
-
--
------------ ----------------------------------------------
---在这个代码中，当服务器返回一个非 200 状态码时，我们需要处理错误。然而，在这里我们仅仅是在注释中填写错误处理的代码。这是因为在这个异步操作中，错误的处理需要在回调函数中处理，而并不是在 try-catch 中处理。
使用 Promise.reject 处理异步错误
为了解决这个问题，我们可以使用 Promise.reject 来处理错误。一个 Promise 可以在其返回的值中包含一个 reject 函数，这样就可以将错误传递给 Promise 的 reject handler 了。
比如：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
--- -
-- ------
----- --- --------- ----- -----------
----------------
- ----- ----- -
-- ------ ------- - ------ ------- -
------------
-
-- ------
---
-
-----------
------------ -- ------------------
------------ -- --------------------在这个例子中，我们在 Promise 中使用了 try-catch 来捕捉错误并通过 Promise 的 reject 函数抛出。然后，在 then 的链式操作中，我们通过 catch 来处理这个错误。
Promise.all 将错误聚合到一个 Promise 中
当我们有多个 Promise 时，可以使用 Promise.all 来聚合它们的错误。当 Promise.all 中存在一个 Promise 返回了 reject 状态时，Promise.all 会立即返回 reject，并包含所有 Promises 中 reject 的原因。
比如：
-- -------------------- ---- ------- ----- -------- - - --------------------- --------------------------- ------------------ ----------------- ---------------------- -- --------------------- ---------------- -- ---------------------- ------------ -- --------------------
在这个例子中，我们创建了一个包含一个 reject Promise 的 Promise 数组。当我们传递这个数组给 Promise.all 时，Promise.all 会在第一个 reject Promise 时返回并传递给它的第一个原因。
结论
异步错误处理是一个常见的挑战，但是通过使用 Promise.reject 和 Promise.all 就能够更加优雅地处理它们。在编写带有异步操作的前端代码时，我们应该更加主动地考虑错误处理，以确保我们的代码更加健壮，安全和可靠。
示例代码
本文的例子完整代码如下：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
--- -
-- ------
----- --- --------- ----- -----------
----------------
- ----- ----- -
-- ------ ------- - ------ ------- -
------------
-
-- ------
---
-
-----------
------------ -- ------------------
------------ -- --------------------
----- -------- - -
---------------------
---------------------------
------------------ -----------------
----------------------
--
---------------------
---------------- -- ----------------------
------------ -- --------------------阅读这篇文章可以之后，你可以将其复制到代码编辑器，运行示例代码，检查控制台输出，加深你的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67050064d91dce0dc8514737