ES7 中可选的 catch 绑定

在 ES6 引入 Promise 之后，处理异步操作变得非常方便和可读。但是，当 Promise 内部发生错误时，我们需要在 then 方法中显式地指定捕获错误的处理函数。而在 ES7 中，我们有一种可选的 catch 绑定方式，它可以让我们更加简洁地处理 Promise 的错误。

传统的 Promise 错误处理方式

在 ES6 引入 Promise 之前，处理异步操作通常需要使用回调函数，这会导致很多嵌套的函数调用，代码难以维护和阅读。而 Promise 则通过链式调用的方式，将异步操作的各个阶段分离，并且可以通过 then 方法传递参数和返回值，更加直观和优雅。例如：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

当 Promise 内部发生错误时，我们需要在 catch 方法中显式地指定错误处理的函数。这是因为错误会向下传递，直到第一个 catch 方法被调用为止。例如：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

在上面的示例中，如果远程服务器返回了一个非 200 状态码的响应，就会抛出一个 Error 对象，然后被 catch 方法捕获并处理。

ES7 中的可选 catch 绑定

在 ES7 中，我们可以使用可选的 catch 绑定方式，它可以让我们更加简洁地处理 Promise 的错误。基本语法如下：

try {
  // 异步操作
} catch {
  // 处理错误
}

在上面的语法中，catch 后面没有指定错误处理的参数名称。这是因为如果 catch 内部没有定义参数，就会默认使用一个名为 error 的内部变量来接收错误对象。例如：

try {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // 处理数据
    })
    .catch();
} catch {
  console.log('Oops, something went wrong.');
}

在上面的示例中，我们省略了 catch 方法内部的参数，而使用了可选的 catch 绑定方式来处理错误。当 Promise 内部发生错误时，会被 catch 内部的代码捕获并处理。

注意事项

需要注意的是，可选的 catch 绑定只能用于 Promise，而不能用于普通的 try/catch 块。如果你使用可选的 catch 绑定时，却没有指定错误处理的代码，那么错误将会被安静地忽略。因此，你应该始终明确指定 catch 方法内部的参数名称，这样可以让代码更加清晰和可读。例如：

try {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // 处理数据
    })
    .catch(error => {
      console.log('Oops, something went wrong.', error);
    });
} catch {
  console.log('Oops, something went wrong.');
}

总结

ES7 中的可选 catch 绑定是一种更加简洁和优雅的处理 Promise 错误的方式。它可以让我们省略 catch 方法内部的参数，使代码更加清晰和易读。但是需要注意的是，catch 方法内部的参数名称应该始终明确指定，以避免错误被安静地忽略。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b22588add4f0e0ffb4fd65