Promise 和 async/await 被 try-catch 包裹时的行为差异

在 JavaScript 中,try-catch 是同步 的,而 Promise 的 rejection 是异步的,这导致了两者的行为有很大区别。下面我用实际例子详细说明。

1. 普通 Promise 被 try-catch 包裹(捕获不到)

js 复制代码
try {
  Promise.reject(new Error('失败了'));
  // 或者
  new Promise((resolve, reject) => {
    reject(new Error('reject 调用'));
  });
} catch (err) {
  console.log('捕获到了吗?', err.message);
}

// 结果:catch 不会执行
// 控制台会报:UnhandledPromiseRejectionWarning(未处理的 Promise 拒绝)

原因 :Promise.reject() 和 reject() 是异步触发的,try-catch 捕获不到异步错误。


2. Promise 执行器(executor)里同步 throw(可以捕获)

js 复制代码
try {
  new Promise((resolve, reject) => {
    throw new Error('同步抛出'); // 注意是 throw,不是 reject
  });
} catch (err) {
  console.log('捕获成功:', err.message); // 可以捕获
}

注意 :只有在 new Promise 的执行器函数里同步 throw,才会被外层的 try-catch 捕获。一旦变成 reject(),就捕获不到了。


3. async/await + try-catch(推荐写法,可以捕获)

js 复制代码
async function getData() {
  try {
    const result = await Promise.reject(new Error('请求失败'));
    console.log(result);
  } catch (err) {
    console.log('成功捕获异步错误:', err.message); // '请求失败'
  }
}

getData();

核心机制:

  • await 会把 rejected 的 Promise 转换成 throw
  • 因此 try-catch 就能正常捕获了

4. 调用 async 函数时使用 try-catch(捕获不到)

js 复制代码
async function getData() {
  return await Promise.reject(new Error('失败'));
}

try {
  getData();           // 没有 await!
} catch (err) {
  console.log('能捕获吗?'); // 捕获不到
}

原因 :getData() 立即返回一个 Promise,错误是异步发生的,try-catch 无法捕获。

必须改成下面这样才行:

js 复制代码
try {
  await getData();     // 加上 await 才行
} catch (err) {
  console.log('现在能捕获了');
}

总结对比表

场景 是否能被 try-catch 捕获 说明
Promise.reject() / reject() + try-catch ❌ 不能 异步错误
new Promise 里同步 throw + try-catch ✅ 能 同步错误
async 函数内部 await + try-catch ✅ 能 await 把 rejection 转成 throw
调用 async 函数(无 await)+ try-catch ❌ 不能 返回的是 Promise
顶层模块使用 await + try-catch(支持 top-level await 的环境) ✅ 能 相当于在 async 上下文中

最佳实践建议

  1. 推荐写法(async 函数内部):

    js 复制代码
    async function foo() {
      try {
        const res = await fetch('/api');
        return await res.json();
      } catch (err) {
        console.error('出错了', err);
        throw err; // 或返回默认值
      }
    }
  2. 或者使用 .catch() 方法(链式写法):

    js 复制代码
    fetch('/api')
      .then(res => res.json())
      .catch(err => console.error(err));
  3. 永远不要让 Promise rejection 变成 unhandled,这会导致程序状态不可预测。

相关推荐
Penge6664 小时前
《Go 后端开发者学 TypeScript:数组和元组》
javascript
Penge6665 小时前
《Go 后端开发者学 TypeScript:export关键字大全》
javascript
Penge6665 小时前
《Go 后端开发者学 TypeScript:从零理解 async、await 与 Promise》
javascript
Penge6665 小时前
typescript 中const用法
javascript
Csvn6 小时前
Monorepo
前端
Csvn6 小时前
流水线
前端
Csvn6 小时前
微前端架构
前端
岁月宁静7 小时前
AI 应用开发工程师简历怎么写:HR 初筛、技术复筛、面试追问,三道关卡各看什么?
人工智能·python·面试
Linux-lucky8 小时前
45-Linux学习之旅之防火墙与WEB加固
linux·前端·网络·学习·ubuntu
Dream it possible!9 小时前
LeetCode 面试经典 150_多维动态规划_交错字符串(97_C++_中等)
算法·leetcode·面试·动态规划