web

聊聊try...catch 与 then...catch

处理错误的两种方式：`try...catch` 与 `then`、`catch`

在前端编程中，错误和异常处理是保证代码健壮性和用户体验的重要环节。JavaScript 提供了多种方式来处理错误，其中最常见的两种是 try...catch 和 Promise 的 then、catch，但是什么时候该用try...catch，什么时候该用then、catch呢，下面将详细探讨这两种机制的区别及其适用场景。

1学习.png

一、`try...catch`

try...catch 是一种用于捕获和处理同步代码中异常的机制。其基本结构如下：

try {
// 可能会抛出异常的代码

} catch (error) {
// 处理异常

}

使用场景：

主要用于同步代码，尤其是在需要处理可能抛出的异常时。
适用于函数调用、操作对象、数组等传统代码中。

示例：

function divide(a, b) {
try {
if (b === 0) {
throw new Error("Cannot divide by zero");

        }
return a / b;

    } catch (error) {
console.error(error.message);

    }

}

divide(4, 0); // 输出: Cannot divide by zero

在这个例子中，如果 b 为零，则会抛出一个错误，并被 catch 块捕获。

二、`then` 和 `catch`

在处理异步操作时，使用 Promise 的 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();