链式调用！让异步代码如丝般顺滑，手写promise轻松搞定！

前端

2023-09-19 02:56:34

打破回调地狱：手把手带你实现 Promise，让异步代码飞扬

前言：异步编程的痛点

在现代 Web 开发中，异步编程已成为不可或缺的一部分。然而，传统的回调地狱编写方式却让异步代码变得难以阅读和维护。回调地狱就像一层层嵌套的函数，代码可读性极低，而且容易出错。

破茧而出：Promise 的诞生

为了解决回调地狱的痛点，Promise 应运而生。Promise 是 JavaScript 中处理异步操作的利器，它可以使异步代码看起来像同步一样执行，从而解决地狱回调问题，大幅提升代码可读性。

Promise 的实现原理

Promise 是一个对象，它表示一个异步操作的最终完成或失败及其结果值。Promise 有三种状态：等待（pending）、已完成（fulfilled）和已失败（rejected）。

当一个 Promise 被创建时，它处于 pending 状态。当异步操作完成时，Promise 会从 pending 状态转变为 fulfilled 或 rejected 状态，并携带结果值。

Promise 的链式调用

Promise 支持链式调用，这使得我们可以将多个异步操作串联起来，并对每个操作的结果进行处理。链式调用的语法如下：

promise.then(function(result) {
  // 对结果进行处理
  return result;
}).then(function(result) {
  // 对处理后的结果进行进一步处理
});

手写 Promise 实现链式调用

下面我们来手写一个 Promise，并实现链式调用：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = null;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

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

      this.state = 'fulfilled';
      this.result = result;
      this.onFulfilledCallbacks.forEach((callback) => callback(result));
    };

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

      this.state = 'rejected';
      this.result = error;
      this.onRejectedCallbacks.forEach((callback) => callback(error));
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      }
    });
  }
}

实例演示

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise
  .then((result) => {
    console.log(result);
    return result + '!';
  })
  .then((result) => {
    console.log(result);
  });