当前位置：首页 > article >正文

await func().catch()和try{ func() }.catch()，两种写法，有什么区别

article 2025/3/23 10:14:42

await func().catch() 和 try { await func() } catch {} 是两种处理异步操作错误的常见写法，虽然它们的功能相似，但在使用场景和细节上有一些区别。

1. `await func().catch()`

这种写法是将 catch 直接链式调用到 func() 上，捕获 func() 返回的 Promise 的错误。

await func().catch(error => {
  console.error('Error:', error);
});

特点：

简洁：代码更简洁，适合简单的错误处理。
作用范围：只捕获 func() 的 Promise 错误，不会捕获 catch 回调中的错误。
返回值：如果 func() 成功，返回 func() 的结果；如果失败，返回 catch 回调的返回值（如果没有返回值，则是 undefined）。

适用场景：

当你只需要简单地处理错误，并且不需要在 catch 中执行复杂逻辑时。
当你希望将错误处理和业务逻辑分开时。

2. `try { await func() } catch {}`

这种写法是传统的 try-catch 语法，用于捕获 await func() 中的错误。

try {
  const result = await func();
  console.log('Success:', result);
} catch (error) {
  console.error('Error:', error);
}

特点：

明确：错误处理逻辑更清晰，适合复杂的错误处理。
作用范围：可以捕获 try 块中所有同步和异步的错误（包括 await func() 和 try 块中的其他代码）。
返回值：如果 func() 成功，返回 func() 的结果；如果失败，进入 catch 块。

适用场景：

当你需要在错误处理中执行复杂逻辑时。
当你需要捕获 try 块中所有可能的错误时。

3. 两种写法的区别

特性	await func().catch()	try { await func() } catch {}
代码简洁性	更简洁	稍显冗长
错误捕获范围	只捕获 `func()` 的 Promise 错误	捕获 `try` 块中所有同步和异步错误
返回值处理	返回 `func()` 或 `catch` 回调的结果	返回 `func()` 或进入 `catch` 块
适用场景	简单错误处理	复杂错误处理
可读性	适合链式调用，但错误处理逻辑可能不够直观	错误处理逻辑更清晰

4. 示例对比

（1）await func().catch()

const result = await func().catch(error => {
  console.error('Error:', error);
  return 'default value'; // 返回一个默认值
});
console.log('Result:', result); // 如果 func() 失败，输出 'default value'

（2）try { await func() } catch {}

let result;
try {
  result = await func();
  console.log('Success:', result);
} catch (error) {
  console.error('Error:', error);
  result = 'default value'; // 返回一个默认值
}
console.log('Result:', result); // 如果 func() 失败，输出 'default value'