在前端开发中，我们经常需要处理异步任务的结果，而 Promise 已经成为了一种非常常见的处理异步任务的方式。然而，当 Promise 链中的某个 Promise 抛出异常时，如何有效地处理这个异常，让整个 Promise 链能够正常执行，并返回我们期望的结果呢？
本文将为您介绍 Promise 链中的异常处理技巧，让您更好地理解 Promise，并能够灵活地处理 Promise 链中可能出现的异常。
Promise 异常处理的基础知识
在开始介绍 Promise 异常处理技巧前，我们先来回顾一下 Promise 异常处理的基础知识。
在 Promise 链中，当遇到抛出异常的代码时，Promise 会直接跳到链中的 catch() 方法中，并将异常对象作为参数传递给 catch() 方法。因此，我们一般会在 Promise 链的最后加上一个 catch() 方法，用来处理其中可能出现的异常。
下面是一个简单的 Promise 链示例，其中每个 Promise 都会随机抛出一个异常，我们将通过 catch() 方法来捕捉这些异常。
-- -------------------- ---- ------- -------- --------------------- - ----- ----- - --- ---------------- ---- -------- ------ ------------- - --- - --------------------- - -------------------------- - --------------------- --------- -- - ---------------- ------ --------------------- -- --------- -- - ---------------- ------ --------------------- -- --------- -- - ---------------- ------ --------------------- -- ------------ -- - ------------------ --展开代码
在这个例子中，我们通过 generateRandomError() 生成了一些随机的 Promise，有些会返回 'Success’，有些会抛出一个 Error。我们通过 then() 方法组成了一个 Promise 链，每个 then() 方法都会返回一个新的 Promise 对象。最后，我们加上了一个 catch() 方法，用来捕捉整个 Promise 链中可能出现的异常。
Promise 异常处理的技巧
在实际开发中，我们可能需要更加灵活地处理 Promise 链中的异常，而不是简单地将它们全部捕捉到 catch() 方法中。下面介绍一些常用的 Promise 异常处理技巧，帮助您更好地处理异常，并使 Promise 链更加健壮。
1. 使用 try-catch 语句
在 Promise 链中，我们可以使用 try-catch 语句来捕捉某个 Promise 抛出的异常，并对这个异常进行专门的处理。例如：
-- -------------------- ---- ------- --------------------- --------- -- - ---------------- ------ --------------------- -- --------- -- - --- - --------------- - ----- ------- - ------------------ - ------ --------------------- -- --------- -- - ---------------- ------ --------------------- -- ------------ -- - ------------------ --展开代码
在这个例子中，我们通过 JSON.parse() 方法尝试将 res 解析为 JSON 格式。如果解析失败，便会抛出一个异常，我们就可以通过 try-catch 语句来专门处理这个异常。
需要注意的是，使用 try-catch 语句要谨慎，因为 try-catch 只能捕捉到当前 Promise 中的异常，无法处理前面或后面的 Promise 中的异常。因此，我们只应该在特定的 Promise 中使用 try-catch，而不是在整个 Promise 链中都使用 try-catch。
2. 使用 Promise.all() 方法
在 Promise 链中，如果某个 Promise 已经抛出了异常，那么整个 Promise 链就会中断，即使后面的 Promise 没有抛出异常。如果我们想让整个 Promise 链忽略单个 Promise 的异常，继续往下执行，可以使用 Promise.all() 方法。
Promise.all() 接受一个 Promise 数组作为参数，并返回一个新的 Promise。当 Promise 数组中的所有 Promise 都正常执行时，返回一个包含所有 Promise 结果的数组。当 Promise 数组中有一个 Promise 抛出异常时，整个 Promise 链就会失败，并返回一个包含异常信息的 Promise。例如：
-- -------------------- ---- ------- ------------- ---------------------- ---------------------- --------------------- -- ------------- -- - -------------------- -- ------------ -- - ------------------ --展开代码
在这个例子中，我们将三个 Promise 放在一个 Promise 数组中，使用 Promise.all() 方法来执行这个数组中的所有 Promise。如果其中一个 Promise 抛出异常，整个 Promise 链也不会中断，而是直接跳到 catch() 方法中，并返回包含异常信息的 Promise。在这种情况下，我们可以通过 Promise.all() 方法来忽略单个 Promise 的异常，继续执行下去。
需要注意的是，Promise.all() 方法只有在所有 Promise 都正常执行时才会返回结果。如果 Promise 链中的某个 Promise 长时间未响应，或者 Promise 链中的 Promise 数量过多，可能会导致 Promise.all() 方法执行失败。因此，我们需要根据实际情况来选择是否使用 Promise.all() 方法。
3. 在 Promise 链的最后使用 catch() 方法
无论是使用 try-catch 语句，还是使用 Promise.all() 方法，最终都需要在 Promise 链的最后加上一个捕捉异常的 catch() 方法。因为如果异常没有被 catch() 方法捕获，就会抛到浏览器的控制台中，让用户感到很不友好。
在使用 catch() 方法时，我们可以不传入参数，来捕捉整个 Promise 链中的所有异常。也可以传入参数，只捕捉指定类型的异常。例如：
-- -------------------- ---- ------- --------------------- --------- -- - ---------------- ------ --------------------- -- ------------ -- - ------------------ -- -------------- --- ---------- ---- -------- - -- ------ - ---- - ----- ----- - --展开代码
在这个例子中，我们传入一个函数作为 catch() 方法的参数，用来捕捉整个 Promise 链中的异常。如果异常的 message 属性等于 'Something went wrong!'，我们可以在这里继续处理这个异常，否则将它rethrow出去，让后面的 catch() 方法继续处理。
4. 将异常信息传递给下游 Promise
在使用 then() 方法时，我们可以在 then() 方法中返回一个新的 Promise 对象，将当前 Promise 的结果或异常信息传递给下游 Promise。这样，我们就可以在跨越多个 Promise 的链中共享某个异常信息，避免重复处理异常。例如：
-- -------------------- ---- ------- --------------------- --------- -- - ---------------- ------ --- -- --------- -- - ------ --- -- --------- -- - --------------- -- ------------ -- - ------------------ --展开代码
在这个例子中，我们在第一个 then() 方法中返回 res，然后在第二个 then() 方法中再返回 res。这样，当第三个 then() 方法中的 JSON.parse(res) 抛出异常时，它会将异常信息直接传递给 catch() 方法，而不是重新抛出异常。
小结
在本文中，我们介绍了 Promise 链中的异常处理基础知识，以及一些常用的 Promise 异常处理技巧。这些技巧可以帮助您更好地理解 Promise，处理 Promise 链中可能出现的异常，并使 Promise 链更加健壮。在使用这些技巧时，需要根据实际情况进行判断，选择最适合的处理方式。希望本文能对您有所帮助，让您在前端开发中能够更加自如地使用 Promise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6780c630ce7f486125488b51
