手写一个很简单的异步编程解决方案Promise及其链式调用

2023-09-13 22:57:15

Promise：揭开异步编程的神秘面纱

探索 Promise 的内部机制

在现代 Web 开发中，异步编程已成为一种必不可少的技术。它使我们能够执行长时间运行的任务，而无需阻塞 UI 线程。Promise 是一种强大的工具，可简化异步编程，为我们提供一种优雅的方式来处理和链接异步操作。

剖析 Promise 的本质

Promise 是一种表示异步操作最终完成或失败及其结果值的对象。它有两个状态：已完成和已拒绝。当异步操作成功完成时，Promise 将转换到已完成状态并携带一个结果值。当操作失败时，Promise 将转变为已拒绝状态并包含一个错误对象。

创建和使用 Promise

我们可以使用 new Promise() 构造函数创建 Promise 对象。该构造函数接受一个执行器函数作为参数，该函数有两个参数：resolve 和 reject。这些函数用于在异步操作成功完成或失败时更改 Promise 的状态。

一旦创建了 Promise，我们就可以使用 then() 和 catch() 方法处理其结果。then() 方法指定在 Promise 已完成时执行的函数，而 catch() 方法指定在 Promise 已拒绝时执行的函数。

Promise 的连锁调用

Promise 的一个强大特性是其链式调用的能力。这使我们能够将多个异步操作连接起来，形成一个顺序执行的链条。这可以使我们的代码更加简洁易读。

手把手实现一个简单的 Promise

要深入了解 Promise 的工作原理，让我们尝试自己实现一个简单的 Promise 对象。

class SimplePromise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.callbacks = [];

    const resolve = (value) => {
      if (this.state !== 'pending') {
        return;
      }

      this.state = 'fulfilled';
      this.result = value;

      for (const callback of this.callbacks) {
        callback(value);
      }
    };

    const reject = (error) => {
      if (this.state !== 'pending') {
        return;
      }

      this.state = 'rejected';
      this.result = error;

      for (const callback of this.callbacks) {
        callback(error);
      }
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new SimplePromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.result);
        resolve(this.result);
      } else if (this.state === 'rejected') {
        onRejected(this.result);
        reject(this.result);
      } else {
        this.callbacks.push(() => {
          if (this.state === 'fulfilled') {
            onFulfilled(this.result);
            resolve(this.result);
          } else if (this.state === 'rejected') {
            onRejected(this.result);
            reject(this.result);
          }
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}

使用 Promise 简化异步请求

让我们使用 Promise 来简化一个异步请求：

const fetchPromise = fetch('https://example.com/api/v1/users');

fetchPromise
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });