首页文章资源工具教程 栏目

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具，网友无需注册和下载安装即可使用

点击查看

循序渐进实现Promise

更新日期: 2021-05-31阅读: 1.4k标签: Promise

前言

在前端面试和日常开发中，经常会接触到Promise。并且在现如今的很多面试中，也会经常被要求手写Promise。

接下来，将使用JavaScript循序渐进实现一个简单的Promise，支持异步和then链式调用。


分析Promise

Promise对象用于表示一个异步操作的最终完成 (或失败)及其结果值，常用来实现异步操作。

Promise状态

Promise有三种状态：

pending 初始状态
fulfilled 执行成功后的状态
rejected 执行失败后的状态

Promise状态只能由pending改变为fulfilled或者由pending改变为rejected，Promise状态改变的这一过程被称为settled，并且，状态一旦改变，后续就不会再次被改变。

Promise构造函数中的参数

Promise构造函数接收一个函数参数executor，该函数接收两个参数：

resolve
reject

执行resolve会将Promise状态由pending改变为fulfilled，并触发then方法中的成功回调函数onFulfilled，

执行reject会将Promise状态由pending改变为rejected，并触发then方法中的失败回调函数onRejected。

then方法中的回调函数参数

then方法接收两个参数：

onFulfilled：成功回调函数，接收一个参数，即resolve函数中传入的值
onRejected：失败回调函数，接收一个参数，即reject函数中传入的值

如果Promise状态变为fulfilled，就会执行成功回调函数onFulfilled；如果Promise状态变为rejected，就会执行失败回调函数onRejected。


实现Promise

基础Promise

首先，constructor接收一个函数executor，该函数又接收两个参数，分别是resolve和reject函数。

因此，需要在constructor中创建resolve和reject函数，并传入executor函数中。

class MyPromise {
  constructor(executor) {
    const resolve = (value) => {};

    const reject = (value) => {};

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

其次，Promise会根据状态，执行对应的回调函数。最开始的状态为pending，当resolve时，状态由pending变为fulfilled；当reject时，状态由pending变为rejected。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';

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

    const reject = (value) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
      }
    };

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

Promise状态变更后，会触发then方法中对应的回调函数。如果状态由pending变为fulfilled，则会触发成功回调函数，如果状态由pending变为rejected，则会触发失败回调函数。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = null;

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

    const reject = (value) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.value = value;
      }
    };

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

  then(onFulfilled, onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    }

    if (this.state === 'rejected') {
      onRejected(this.value);
    }
  }
}

接下来可以写点测试代码测试一下功能

const p1 = new MyPromise((resolve, reject) => resolve('resolved'));
p1.then(
  (res) => console.log(res), // resolved
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => reject('rejected'));
p2.then(
  (res) => console.log(res),
  (err) => console.log(err) // rejected
);

但是，如果用以下代码测试，会发现什么也没有输出。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('resolved'), 1000);
});

p1.then(
  (res) => console.log(res),
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => reject('rejected'), 1000);
});

p2.then(
  (res) => console.log(res),
  (err) => console.log(err)
);

这是因为在调用then方法时，Promise仍处于pending状态。onFulfilled和onRejected回调函数都没有被执行。

因此，接下来需要支持异步。

支持异步的Promise

为了支持异步，需要先保存onFulfilled和onRejected回调函数，一旦Promise状态变化，立刻执行对应的回调函数。

注意：这里有个细节需要注意，即onFulfilledCallbacks和onRejectedCallbacks是数组，因为Promise可能会被调用多次，因此会存在多个回调函数。

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

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;

        this.onFulfilledCallbacks.forEach((fn) => fn(value));
      }
    };

    const reject = (value) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.value = value;

        this.onRejectedCallbacks.forEach((fn) => fn(value));
      }
    };

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

  then(onFulfilled, onRejected) {
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }

    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    }

    if (this.state === 'rejected') {
      onRejected(this.value);
    }
  }
}

接下来可以用之前的测试代码测试一下功能

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('resolved'), 1000);
});

p1.then(
  (res) => console.log(res), // resolved
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => reject('rejected'), 1000);
});

p2.then(
  (res) => console.log(res),
  (err) => console.log(err) // rejected
);

但是如果用以下代码测试，会发现报错了。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('resolved'), 1000);
});

p1.then(
  (res) => console.log(res),
  (err) => console.log(err)
).then(
  (res) => console.log(res),
  (err) => console.log(err)
); // Uncaught TypeError: Cannot read property 'then' of undefined

这是因为第一个then方法并没有返回任何值，然而却又连续调用了then方法。

因此，接下来需要实现then链式调用。

支持then链式调用的Promise

要想支持then链式调用，then方法需要返回一个新的Promise。

因此，需要改造一下then方法，返回一个新的Promise，等上一个Promise的onFulfilled或onRejected回调函数执行完成后，再执行新的Promise的resolve或reject函数。

class MyPromise {
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const fulfilledFromLastPromise = onFulfilled(this.value);
            resolve(fulfilledFromLastPromise);
          } catch (err) {
            reject(err);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const rejectedFromLastPromise = onRejected(this.value);
            reject(rejectedFromLastPromise);
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === 'fulfilled') {
        try {
          const fulfilledFromLastPromise = onFulfilled(this.value);
          resolve(fulfilledFromLastPromise);
        } catch (err) {
          reject(err);
        }
      }

      if (this.state === 'rejected') {
        try {
          const rejectedFromLastPromise = onRejected(this.value);
          reject(rejectedFromLastPromise);
        } catch (err) {
          reject(err);
        }
      }
    });
  }
}

接下来可以用以下代码测试一下功能

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('resolved'), 1000);
});

p1.then(
  (res) => {
    console.log(res); // resolved
    return res;
  },
  (err) => console.log(err)
).then(
  (res) => console.log(res), // resolved
  (err) => console.log(err)
);

const p2 = new MyPromise((resolve, reject) => {
  setTimeout(() => reject('rejected'), 1000);
});

p2.then(
  (res) => console.log(res),
  (err) => {
    console.log(err); // rejected
    throw new Error('rejected');
  }
).then(
  (res) => console.log(res),
  (err) => console.log(err) // Error: rejected
);

但是，如果改用以下代码测试，会发现第二个then方法中的成功回调函数并没有按预期输出（‘resolved’），而是输出了上一个then方法的onFulfilled回调函数中返回的Promise。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('resolved'), 1000);
});

p1.then(
  (res) => {
    console.log(res); // resolved
    return new MyPromise((resolve, reject) => {
      setTimeout(() => resolve('resolved'), 1000);
    })
  },
  (err) => console.log(err)
).then(
  (res) => console.log(res), // MyPromise {state: "pending"}
  (err) => console.log(err)
);

这是因为onFulfilled/onRejected回调函数执行完之后，只是简单的将onFulfilled/onRejected执行完返回的值传入resolve/reject函数中执行，并没有考虑onFulfilled/onRejected执行完会返回一个新的Promise这种情况，所以第二次then方法的成功回调函数中直接输出了上一次then方法的成功回调函数中返回的Promise。因此，接下来需要解决这个问题。

首先，可以将以上测试代码改成另一种写法，方便梳理思路。

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('resolved'), 1000);
});

const p2 = p1.then(
  (res) => {
    console.log(res);
    const p3 = new MyPromise((resolve, reject) => {
      setTimeout(() => resolve('resolved'), 1000);
    });

    return p3;
  },
  (err) => console.log(err)
);

p2.then(
  (res) => console.log(res),
  (err) => console.log(err)
);

可以看到，一共有三个Promise：

第一个Promise：即通过new构造出来的p1
第二个Promise：即通过调用then方法返回的p2
第三个Promise：即在p1.then方法的成功回调函数参数中返回的p3

现在的问题是，调用p2的then方法时，p3还处于pending状态。

要想实现p2.then方法中的回调函数能正确输出p3中resolve/reject之后的值，需要先等p3状态变化后再将变化后的值传入p2中的resolve/reject中即可。换句话说，三个Promise状态变化的先后顺序应该是p1 --> p3 --> p2。

class MyPromise {
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const fulfilledFromLastPromise = onFulfilled(this.value);

            if (fulfilledFromLastPromise instanceof MyPromise) {
              fulfilledFromLastPromise.then(resolve, reject);
            } else {
              resolve(fulfilledFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const rejectedFromLastPromise = onRejected(this.value);

            if (rejectedFromLastPromise instanceof MyPromise) {
              rejectedFromLastPromise.then(resolve, reject);
            } else {
              reject(rejectedFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === 'fulfilled') {
        try {
          const fulfilledFromLastPromise = onFulfilled(this.value);

          if (fulfilledFromLastPromise instanceof MyPromise) {
            fulfilledFromLastPromise.then(resolve, reject);
          } else {
            resolve(fulfilledFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }

      if (this.state === 'rejected') {
        try {
          const rejectedFromLastPromise = onRejected(this.value);

          if (rejectedFromLastPromise instanceof MyPromise) {
            rejectedFromLastPromise.then(resolve, reject);
          } else {
            reject(rejectedFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }
    });
  }
}


最终版Promise

最后，一个简单的Promise就完成了，支持异步和then链式调用。完整代码如下：

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

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((fn) => fn(value));
      }
    };

    const reject = (value) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.value = value;
        this.onRejectedCallbacks.forEach((fn) => fn(value));
      }
    };

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          try {
            const fulfilledFromLastPromise = onFulfilled(this.value);
            if (fulfilledFromLastPromise instanceof Promise) {
              fulfilledFromLastPromise.then(resolve, reject);
            } else {
              resolve(fulfilledFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });
        this.onRejectedCallbacks.push(() => {
          try {
            const rejectedFromLastPromise = onRejected(this.value);
            if (rejectedFromLastPromise instanceof Promise) {
              rejectedFromLastPromise.then(resolve, reject);
            } else {
              reject(rejectedFromLastPromise);
            }
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === 'fulfilled') {
        try {
          const fulfilledFromLastPromise = onFulfilled(this.value);
          if (fulfilledFromLastPromise instanceof Promise) {
            fulfilledFromLastPromise.then(resolve, reject);
          } else {
            resolve(fulfilledFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }

      if (this.state === 'rejected') {
        try {
          const rejectedFromLastPromise = onRejected(this.value);
          if (rejectedFromLastPromise instanceof Promise) {
            rejectedFromLastPromise.then(resolve, reject);
          } else {
            reject(rejectedFromLastPromise);
          }
        } catch (err) {
          reject(err);
        }
      }
    });
  }
}

使用JavaScript循序渐进实现一个简单的Promise，支持异步和then链式调用。
翻译并整理自Medium: Implementing a simple Promise in Javascript - by Zhi Sun


链接: https://fly63.com/article/detial/10385

上一页:  Vue开发中可以使用的 ES6新特征下一页:  如何替换json对象中的key

你真的了解 Promise 吗？Promise 必知必会（十道题）

Promise 想必大家十分熟悉，想想就那么几个 api，可是你真的了解 Promise 吗？本文根据 Promise 的一些知识点总结了十道题，看看你能做对几道。

剖析Promise内部结构，一步一步实现一个完整的、能通过所有Test case的Promise类

本文写给有一定Promise使用经验的人，如果你还没有使用过Promise，这篇文章可能不适合你，Promise标准中仅指定了Promise对象的then方法的行为，其它一切我们常见的方法/函数都并没有指定.

Async/Await替代Promise的6个理由

Async/Await替代Promise的6个理由：Async/Await是近年来JavaScript添加的最革命性的的特性之一。它会让你发现Promise的语法有多糟糕，而且提供了一个直观的替代方法。

Promise 原理解析与实现(遵循Promise/A+规范)

Promise是JS异步编程中的重要概念，异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一,Promise 是一个构造函数， new Promise 返回一个 promise对象 接收一个excutor执行函数作为参数

简单模仿实现 Promise 的异步模式

这篇文章是考虑如何自己实现一个简单 Promise，用以理解 Promise。和原生 Promise的调用方法一样，支持链式调用，本文实现的方法只能用于参考Promise的原理，还有很多特性没有实现，比如 race，all 方法的实现。

数组的遍历你都会用了，那Promise版本的呢

在对数组进行一些遍历操作时，发现有些遍历方法对Promise的反馈并不是我们想要的结果。async/await为Promise的语法糖，文中会直接使用async/await替换Promise；map可以说是对Promise最友好的一个函数了，

Promise使用时应注意的问题

最近在使用axios库时遇到了个问题，后端接口报了500错误，但前端并未捕获到。在axios整体配置的代码中，过滤http code时，调用了filter401()、filter500()，但是这里注意并未将两个filter函数的结果返回，也就是并未返回promise，这就是导致问题出现的原因

es6 Promise 的基础用法

想必接触过Node的人都知道，Node是以异步(Async)回调著称的，其异步性提高了程序的执行效率，但同时也减少了程序的可读性。如果我们有几个异步操作，并且后一个操作需要前一个操作返回的数据才能执行

关于 Promise 的 9 个提示

你可以在 .then 里面 return 一个 Promise，每次执行 .then 的时候都会自动创建一个新的 Promise，对调用者来说，Promise 的 resolved/rejected 状态是唯一的，Promise 构造函数不是解决方案，使用 Promise.resolve

手写一款符合Promise/A+规范的Promise

Promise的一些用法在此不多赘述，本篇主要带领你手写一个Promise源码，学完你就会发现：Promise没有你想象中的那么难.本篇大概分为以下步骤：实现简单的同步Promise、增加异步功能、增加链式调用then、增加catch finally方法、增加all race 等方法、实现一个promise的延迟对象defer、最终测试

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!