剖析Promise的本质，亲手编写它，做个技术语言的操盘手

前端

2024-02-11 15:50:39

邂逅Promise，异步编程的利器

在现代网络应用中，异步编程变得不可或缺，而Promise作为一种异步处理机制，因其简洁、强大的特性而广受青睐。它能够让您编写出更加结构化、易于阅读的代码，使代码更具可维护性。

深入Promise内部

Promise的基础

Promise本质上是一个对象，它代表着一个异步操作的结果，可能是成功或失败。Promise有三种状态：

Pending： 初始状态，表示操作尚未完成。
Fulfilled： 成功状态，表示操作已成功完成，并带有结果值。
Rejected： 失败状态，表示操作已失败，并带有错误信息。

Promise的关键方法

Promise提供了两个关键方法：

then()： 用于注册回调函数，当Promise状态改变时执行。
catch()： 用于注册错误处理函数，当Promise状态变为Rejected时执行。

Promise的链式调用

Promise支持链式调用，即在then()方法中返回另一个Promise，以此形成Promise的链条。这使得代码更加简洁，可读性更强。

亲手编写Promise

现在，让我们一起动手编写一个Promise：

function myPromise(executor) {
  let state = 'pending';
  let result;
  let callbacks = [];

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

    state = 'fulfilled';
    result = value;

    setTimeout(() => {
      callbacks.forEach((callback) => {
        callback(result);
      });
    }, 0);
  };

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

    state = 'rejected';
    result = error;

    setTimeout(() => {
      callbacks.forEach((callback) => {
        callback(result);
      });
    }, 0);
  };

  executor(resolve, reject);

  return {
    then: (onFulfilled, onRejected) => {
      return new myPromise((resolve, reject) => {
        callbacks.push((result) => {
          if (state === 'fulfilled') {
            if (onFulfilled) {
              try {
                const x = onFulfilled(result);
                resolve(x);
              } catch (error) {
                reject(error);
              }
            } else {
              resolve(result);
            }
          } else if (state === 'rejected') {
            if (onRejected) {
              try {
                const x = onRejected(result);
                resolve(x);
              } catch (error) {
                reject(error);
              }
            } else {
              reject(result);
            }
          }
        });
      });
    },
    catch: (onRejected) => {
      return this.then(null, onRejected);
    },
  };
}

应用Promise

有了自己编写的Promise，我们就可以在实际场景中应用它：

const myAsyncFunction = () => {
  return new myPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('Async operation successful!');
    }, 2000);
  });
};

myAsyncFunction()
  .then((result) => {
    console.log(result); // "Async operation successful!"
  })
  .catch((error) => {
    console.error(error);
  });