手写 Promise 带你轻松玩转异常处理

前端

2023-10-31 23:27:21

揭开Promise神秘面纱

Promise，一个在 JavaScript 开发中随处可见的工具，它能够让异步操作变得更加简单易控。如果你是刚入门的初学者，或许对 Promise 还有点陌生，但一旦你掌握了它的用法，你将发现它是一个多么强大的利器。

揭开Promise神秘面纱

初探：从本质认识Promise

Promise本质上是一个对象，它的作用在于：

表示异步操作的结果状态 ：Promise 有三种状态：等待（pending）、完成（fulfilled）和拒绝（rejected）。
提供一种链式调用机制 ：你可以通过 then() 方法对异步操作的结果进行后续处理。
提供异常处理机制 ：Promise 提供了 catch() 方法，你可以通过它捕获异步操作中可能发生的错误。

二探：剖析Promise异常处理机制

Promise 的异常处理机制主要由三个方法组成：catch()、resolve() 和 reject()。

1. catch()：捕捉异步操作中的错误

catch() 方法用于捕获异步操作中可能发生的错误。它的语法如下：

promise.catch(errorCallback)

errorCallback：当异步操作被拒绝时，将被调用的函数。

2. resolve()：将Promise状态改为已完成

resolve() 方法用于将 Promise 的状态改为已完成，并传递一个结果值。它的语法如下：

promise.resolve(value)

value：传递给 then() 方法的成功结果。

3. reject()：将Promise状态改为已拒绝

reject() 方法用于将 Promise 的状态改为已拒绝，并传递一个错误对象。它的语法如下：

promise.reject(error)

error：传递给 catch() 方法的错误对象。

三探：巧用Promise异常处理，玩转异步编程

Promise 的异常处理机制为我们提供了强大的工具，让我们能够更加轻松地处理异步操作中的错误。下面列举几个实际应用场景，帮助你更好地理解 Promise 的异常处理机制：

场景一：处理AJAX请求错误

fetch('https://example.com/api')
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('API call failed!');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在这个例子中，我们使用 Promise 来处理 AJAX 请求。如果请求成功，我们将解析响应并打印数据。如果请求失败，我们将抛出错误，并使用 catch() 方法捕获它，并在控制台输出错误信息。

场景二：处理异步文件读取错误

const readFile = (filename) => {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};

readFile('file.txt')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });