為什么前端開發(fā)者都不用 try-catch 了？

作者：JavaScript 2025-02-12 12:00:00

JavaScript 正為 Promise 添加一個(gè)新的方法，使得處理異步函數(shù)更加清晰和安全。Promise.try 允許將任何函數(shù)包裝在 Promise 中，無(wú)論它是否異步。

核心問(wèn)題：

try-catch 主要用于同步代碼塊，它可以捕獲在 try 塊中拋出的同步錯(cuò)誤。

try {
    // 同步代碼
    throw new Error("Sync error");
} catch (e) {
    console.error(e.message); // 捕獲到錯(cuò)誤
}

但對(duì)于在 try 塊中調(diào)用了異步操作（如 setTimeout、Promise 等），那么異步操作中的錯(cuò)誤不會(huì)被同一 try-catch 語(yǔ)句捕獲，因?yàn)樗鼈兪窃谑录h(huán)的下一個(gè)周期中執(zhí)行的。

function asyncFunction() {
    return new Promise((resolve, reject) => {
        try {
            setTimeout(() => {
                throw new Error("Async error");
            }, 1000);
        } catch (e) {
            console.error(e.message); // 不會(huì)捕獲到錯(cuò)誤
            reject(e);
        }
    });
}

在這個(gè)例子中，try/catch 實(shí)際上是多余的，因?yàn)楫惒讲僮髦械腻e(cuò)誤不會(huì)被 try/catch 捕獲。

這使得在處理異步操作時(shí)，我們不得不在每個(gè)可能拋出錯(cuò)誤的地方都添加 try-catch 塊，這不僅增加了代碼的復(fù)雜度，而且容易導(dǎo)致錯(cuò)誤的遺漏：

function asyncFunction() {
    return new Promise((resolve, reject) => {
        try {
            setTimeout(() => {
              try {
                throw new Error("Async error");
              } catch (e) {
                console.error('FedJavaScript', e.message); // 捕獲到錯(cuò)誤
                reject(e)
              }
            }, 1000);
        } catch (e) {
            console.error(e.message); // 不會(huì)捕獲到錯(cuò)誤
            reject(e);
        }
    });
}

這代碼很不優(yōu)雅！

解決方案：Promise.try

Promise.try 為我們提供了一種處理該情況的簡(jiǎn)潔方法：

Promise.try(() => {
    // 同步代碼
    throw new Error("Sync error");
}).catch(e => {
    console.error(e.message); // 捕獲到錯(cuò)誤
});

Promise.try(() => {
    // 異步代碼
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            throw new Error("Async error");
        }, 1000);
    });
}).catch(e => {
    console.error(e.message); // 捕獲到錯(cuò)誤
});

允許我們以更一致的方式處理異步操作的錯(cuò)誤，尤其是在使用 Promises 時(shí)。

Promise.try 的優(yōu)點(diǎn)：

簡(jiǎn)潔性：Promise.try 讓我們可以直接在一個(gè)函數(shù)中處理同步操作，而無(wú)需額外的 new Promise 包裝或 try...catch 塊
一致性：無(wú)論是同步還是異步操作，使用相同的錯(cuò)誤處理機(jī)制可以減少代碼風(fēng)格的不一致，使整個(gè)項(xiàng)目更加統(tǒng)一
易用性：對(duì)于初學(xué)者來(lái)說(shuō)，理解 Promise.try 比學(xué)習(xí)如何正確地組合 new Promise 和 try...catch 更加直觀

參考：https://tc39.es/ecma262/#sec-promise.try

責(zé)任編輯：趙寧寧來(lái)源： JavaScript

前端 try-catch JavaScrip