安全赋值运算符：新的 JavaScript 提案让你告别 try-catch！

在现代 Web 开发中，错误处理一直是一个重要但复杂的问题。传统的 try-catch 语句虽然功能强大，但容易导致代码冗长且难以维护。为了解决这一问题，ECMAScript 近期引入了一个新的提案：安全赋值运算符（Safe Assignment Operator，?=）。

提案概要

安全赋值运算符 ?= 旨在简化错误处理。

• 如果函数抛出错误，运算符返回 [error, null]；
• 如果函数成功执行，运算符返回 [null, result]。

这一运算符与 Promise、async 函数以及任何实现了 Symbol.result 方法的对象兼容，简化了常见的错误处理流程。

示例

const [error, response] ?= await fetch("https://blog.conardli.top");

提案动机

• 简化错误处理：通过消除 try-catch 块，简化错误管理流程。
• 增强代码可读性：减少嵌套，提升代码的清晰度，使错误处理更加直观。
• 跨 API 一致性：在不同 API 中建立统一的错误处理方法，确保行为一致性。
• 提高安全性：减少忽略错误处理的风险，增强代码整体安全性。

使用示例

传统错误处理

async function getData() {
  const response = await fetch("https://blog.conardli.top");
  const json = await response.json();
  return validationSchema.parse(json);
}

使用 ?= 运算符

async function getData() {
  const [requestError, response] ?= await fetch("https://blog.conardli.top");

  if (requestError) {
    handleRequestError(requestError);
    return;
  }

  const [parseError, json] ?= await response.json();

  if (parseError) {
    handleParseError(parseError);
    return;
  }

  const [validationError, data] ?= validationSchema.parse(json);

  if (validationError) {
    handleValidationError(validationError);
    return;
  }

  return data;
}

提案功能

Symbol.result

任何实现了 Symbol.result 方法的对象都可以与 ?= 运算符一起使用，Symbol.result 方法返回一个数组，第一个元素为错误，第二个元素为结果。

function example() {
  return {
    [Symbol.result]() {
      return [new Error("报错啦！"), null];
    },
  };
}

const [error, result] ?= example();

递归处理机制

如果 data 也实现了 Symbol.result，?= 运算符将递归处理它。这种递归机制适用于 Promise 或其他包含 Symbol.result 方法的对象。

const obj = {
  [Symbol.result]() {
    return [
      null,
      {
        [Symbol.result]() {
          return [new Error("Error"), null];
        },
      },
    ];
  },
};

const [error, data] ?= obj;

与 Promise 的兼容性

Promise 是 ?= 运算符支持的另一种常见对象类型。你可以将 ?= 与 await 结合使用，处理异步操作。

const [error, data] ?= await getPromise();

Polyfill

由于该提案仍处于初期阶段，尚未纳入 JavaScript 标准。如果需要在当前环境中使用，可以通过 Polyfill 实现。

提案地址

• GitHub 提案地址：proposal-safe-assignment-operator