一觉醒来，发现 try-catch 要失业了？换个新姿势处理异常！

大家好，我是 昊，用最通俗易懂的语言讲解复杂知识是我的追求。今天想和大家聊聊前端开发中常见的 错误处理 方式，以及 ECMAScript 提案中的一个新特性——安全赋值运算符 ?=。

为什么要使用 try-catch？

在项目开发中，我们经常会用到 try-catch，它的核心作用就是兜底处理。无论是接口请求失败，还是数据格式不符合预期，通过 try-catch 我们可以确保页面不会因为异常而崩溃。

例如，下面这个常见的 API 请求场景：

确保页面不会因为请求失败或返回数据异常而崩溃

try {
    const data = await fetchData();
    
    if (!Array.isArray(data)) throw new Error('数据格式错误');
} catch (error) {
    console.error('请求失败或数据错误：', error);
    
    data = [];
}

在这个例子中，无论请求是否成功或者数据格式是否正确，我们都能保证页面不会崩溃。

处理 JSON 解析错误

JSON.parse 是前端常用的一个方法，但它也很容易报错，例如当传入的字符串不是有效的 JSON 格式时。所以，我们常常会用 try-catch 来兜底处理：

try {
    const obj = JSON.parse(jsonString);
} catch (error) {
    console.error('JSON解析失败：', error);
    obj = {};
}

ECMAScript 提案：安全赋值运算符 ?=

最近，ECMAScript 提出了一项新提案：安全赋值运算符 ?=，它能够让错误处理更加简洁明了。它的工作原理是将函数执行结果转换为一个数组，如果函数抛出错误，返回 [error, null]，如果成功，返回 [null, result]。

例子对比

假设我们仍然在处理 API 请求：

传统的写法：

let data;
try {
    data = await fetchData();
    if (!Array.isArray(data)) throw new Error('数据格式错误');
} catch (error) {
    data = [];
}

使用 ?= 的写法：

const [err, data] ?= await fetchData();
if (err || !Array.isArray(data)) {
    data = [];
}

可以看到，?= 写法简化了代码，并且更加易读。

为什么错误放在前面？

你可能会问：为什么 error 在前，result 在后？其实，这样设计是有原因的：错误是客观存在的，而函数的返回值 result 是主观的。为了方便我们首先检查错误，将 error 放在前面，这样在编写判断逻辑时更加直观。

扩展：Symbol.result

当你想让自己定义的函数或者对象也支持 ?= 处理时，你需要借助 Symbol.result。通过定义 Symbol.result，可以让 ?= 操作符自动调用对象上的这个方法。

const obj = {
    [Symbol.result]() {
        return [null, 42]; // 模拟成功返回结果
    }
};
const [err, res] = obj ?= [];
console.log(res); // 输出 42

递归处理

?= 不仅可以处理单个结果，还可以递归处理嵌套的 Symbol.result。这意味着，如果结果中包含更多的 Symbol.result，它会继续处理，直到所有的 Symbol.result 都被解析完成，或者遇到错误。

支持 Promise

?= 还天然支持 Promise，这意味着你不需要专门处理异步逻辑，它会自动等待 Promise 完成后处理结果。

const [err, result]  ?= await someAsyncFunction;
if (err) {
    console.error('异步操作出错', err);
}

总结

try-catch 是我们在前端开发中兜底处理异常的常见手段，确保应用程序稳定运行。而 ECMAScript 提案中的 安全赋值运算符 ?= 则让错误处理变得更加简洁，特别是在处理函数结果和 Promise 时，显得更加方便。通过 Symbol.result，我们还可以自定义对象的行为，进一步增强代码的灵活性。

我是 昊，一个拥有丰富前端开发经验的程序员，致力于用最通俗的语言分享技术干货，感谢大家的阅读~