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

前端

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

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

picture.image

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

try {
    // 可能会抛出异常的代码
} catch (error) {
    // 处理异常
}

使用场景:

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

示例:

divide(4, 0); // 输出: Cannot divide by zero
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();

总结

  • try...catch:适合于同步代码,能够捕获代码块中抛出的异常。
  • then 和 catch:用于处理 Promise 的结果和错误,适合异步操作。
  • async/await 结合 try...catch:提供了清晰的异步错误处理方式,增强了代码的可读性。

在实际开发中,选择哪种方式取决于代码的性质(同步或异步)以及个人或团队的编码风格。

————转自作者:不爱说话郭德纲

0
0
0
0
关于作者
相关资源
字节跳动云原生降本增效实践
本次分享主要介绍字节跳动如何利用云原生技术不断提升资源利用效率,降低基础设施成本;并重点分享字节跳动云原生团队在构建超大规模云原生系统过程中遇到的问题和相关解决方案,以及过程中回馈社区和客户的一系列开源项目和产品。
相关产品
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论