一、try...catch
try...catch 是一种用于捕获和处理同步代码中异常的机制。其基本结构如下：
try {// 可能会抛出异常的代码
} catch (error) {// 处理异常
}
使用场景：
- 主要用于同步代码，尤其是在需要处理可能抛出的异常时。
- 适用于函数调用、操作对象、数组等传统代码中。
示例：
function divide(a, b) {try {if (b === 0) {throw new Error("异常");}return a / b;} catch (error) {console.error('错误信息');}
}divide(4, 0); // 输出: 异常
如果 b 为零，则会抛出一个错误，并被 catch 块捕获
二、then ...catch
someAsyncFunction().then(result => {// 处理成功的结果}).catch(error => {// 处理错误});
使用场景：
- 主要用于处理异步操作，例如网络请求、文件读取等。
- 可以串联多个 Promise 操作，清晰地处理成功和错误。
function fetchData() {return new Promise((resolve, reject) => {// 模拟异步操作setTimeout(() => {const success = Math.random() > 0.5; // 随机决定成功或失败if (success) {resolve("Data fetched successfully");} else {reject("Failed to fetch data");}}, 1000);});
}fetchData().then(result => {console.log(result);}).catch(error => {console.error(error);});
fetchData 函数模拟了一个异步操作，通过 Promise 来处理结果和错误
三、async/await 与 try...catch
为了使异步代码更具可读性，JavaScript 引入了 async/await 语法。结合 try...catch，可以让异步错误处理更加简洁：
async function fetchDataWithAwait() {try {const result = await fetchData();console.log(result);} catch (error) {console.error(error);}
}fetchDataWithAwait();
总结
try...catch：适合于同步代码，能够捕获代码块中抛出的异常。then...catch：用于处理 Promise 的结果和错误，适合异步操作。async/await结合try...catch：提供了清晰的异步错误处理方式，增强了代码的可读性。
原文链接：https://juejin.cn/post/7418133347543121939
