try...catch 基础用法

  1. function thisThrows() {
  2.   throw new Error("Thrown from thisThrows()");
  3. }
  5. try {
  6.   thisThrows();
  7. } catch (e) {
  8.   console.error(e);
  9. } finally {
  10.   console.log("We do cleanup here");
  11. }
  13. // Output:
  14. // Error: Thrown from thisThrows()
  15. //   ...stacktrace  <-- 这里是错误堆栈，用于查看调用栈（下文同）
  16. // We do cleanup here

捕获 Promise 错误

Case #1： try...catch 捕获

  1. async function thisThrows() {
  2.   throw new Error("Thrown from thisThrows()");
  3. }
  5. async function run() {
  6.   try {
  7.     await thisThrows(); // <-- await 这个 Promise
  8.   } catch (e) {
  9.     console.error(e);
  10.   } finally {
  11.     console.log("We do cleanup here");
  12.   }
  13. }
  15. run();
  17. // Output:
  18. // Error: Thrown from thisThrows()
  19. //   ...stacktrace
  20. // We do cleanup here

Case #2： .catch() 捕获

  1. async function thisThrows() {
  2.   throw new Error("Thrown from thisThrows()");
  3. }
  5. thisThrows()
  6.   .catch(console.error)
  7.   .then(() => console.log("We do cleanup here"));
  9. // Output:
  10. // Error: Thrown from thisThrows()
  11. //   ...stacktrace
  12. // We do cleanup here

捕获嵌套 Promise 错误

  1. async function thisThrows() {
  2.   throw new Error("Thrown from thisThrows()");
  3. }
  5. async function myFunctionThatCatches() {
  6.   try {
  7.     // 使用 `await` 捕获嵌套函数中的第一个错误
  8.     return await thisThrows();
  9.   } catch (e) {
  10.     console.error(e);
  11.   } finally {
  12.     console.log("We do cleanup here");
  13.   }
  14.   return "Nothing found";
  15. }
  17. async function run() {
  18.   const myValue = await myFunctionThatCatches();
  19.   console.log(myValue);
  20. }
  22. run();
  24. // Outptut:
  25. // Error: Thrown from thisThrows()
  26. //   ...stacktrace
  27. // We do cleanup here
  28. // Nothing found

重置错误堆栈

堆栈丢失问题

  1. function thisThrows() {
  2.   throw new Error("Thrown from thisThrows()");
  3. }
  5. function myFunctionThatCatches() {
  6.   try {
  7.     return thisThrows();
  8.   } catch (e) {
  9.     throw new TypeError(e.message);
  10.   } finally {
  11.     console.log("We do cleanup here");
  12.   }
  13. }
  15. async function run() {
  16.   try {
  17.     await myFunctionThatCatches();
  18.   } catch (e) {
  19.     console.error(e);
  20.   }
  21. }
  23. run();
  25. // Outputs:
  26. // We do cleanup here
  27. // TypeError: Error: Thrown from thisThrows()
  28. //    at myFunctionThatCatches (/repo/error_stacktrace_1.js:9:15) <-- 错误指向 `try catch` 块
  29. //    at run (/repo/error_stacktrace_1.js:17:15)
  30. //    at Object.<anonymous> (/repo/error_stacktrace_1.js:23:1)

⚠️第28行，错误显示仅捕获到了 myFunctionThatCatches 块的错误。

如何解决

  1. function thisThrows() {
  2.   throw new Error("Thrown from thisThrows()");
  3. }
  5. function myFunctionThatCatches() {
  6.   try {
  7.     return thisThrows();
  8.   } catch (e) {
  9.     // !! 也许先在这里做其他事情
  10.     throw e;
  11.   } finally {
  12.     console.log("We do cleanup here");
  13.   }
  14. }
  16. async function run() {
  17.   try {
  18.     await myFunctionThatCatches();
  19.   } catch (e) {
  20.     console.error(e);
  21.   }
  22. }
  24. run();
  26. // Outputs:
  27. // We do cleanup here
  28. // Error: Thrown from thisThrows()
  29. //     at thisThrows (/repo/error_stacktrace_2.js:2:11) <-- 注意，我们现在指向实际错误的来源
  30. //     at myFunctionThatCatches (/repo/error_stacktrace_2.js:7:16)
  31. //     at run (/repo/error_stacktrace_2.js:18:15)
  32. //     at Object.<anonymous> (/repo/error_stacktrace_2.js:24:1)

⚠️29 行捕获到了嵌套在 myFunctionThatCatches 内部的错误 thisThrows 。

运行环境

报错：ReferenceError: regeneratorRuntime is not defined
原因：async/await 需要配置运行环境
解决：

  1. npm i regenerator-runtime -D
  1. // 入口文件
  2. import "regenerator-runtime/runtime.js";