Promise Polyfill - 内部函数实现剖析

2024-01-20 22:24:00

在上一篇文章中，我们了解了promise的基本流程和原理。现在，我们来看看promise提供的函数是如何实现的。

首先，这些函数是直接放在promise对象上的，而不是放在原型链上。这是因为promise对象是一个函数，而且它本身就是一个构造函数。因此，我们可以直接在promise对象上定义函数。

Promise.resolve

Promise.resolve = function(value) {
  if (value instanceof Promise) {
    return value;
  }

  return new Promise(function(resolve, reject) {
    resolve(value);
  });
};

Promise.resolve函数的作用是将一个值包装成一个promise对象。如果传入的值是一个promise对象，那么就直接返回这个promise对象。否则，就创建一个新的promise对象，并立即执行resolve函数，将值传递给resolve函数。

Promise.reject

Promise.reject = function(reason) {
  return new Promise(function(resolve, reject) {
    reject(reason);
  });
};

Promise.reject函数的作用是创建一个新的promise对象，并立即执行reject函数，将原因传递给reject函数。

promise.then

promise.then = function(onFulfilled, onRejected) {
  var self = this;

  return new Promise(function(resolve, reject) {
    self.then(function(value) {
      try {
        var result = onFulfilled(value);
        resolve(result);
      } catch (e) {
        reject(e);
      }
    }, function(reason) {
      try {
        var result = onRejected(reason);
        resolve(result);
      } catch (e) {
        reject(e);
      }
    });
  });
};

promise.then函数的作用是创建一个新的promise对象，并注册两个回调函数：onFulfilled和onRejected。当promise对象的状态变为fulfilled时，就执行onFulfilled函数；当promise对象的状态变为rejected时，就执行onRejected函数。

promise.catch

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

promise.catch函数的作用是创建一个新的promise对象，并注册一个回调函数：onRejected。当promise对象的状态变为rejected时，就执行onRejected函数。

promise.finally

promise.finally = function(onFinally) {
  var self = this;

  return new Promise(function(resolve, reject) {
    self.then(function(value) {
      try {
        onFinally();
        resolve(value);
      } catch (e) {
        reject(e);
      }
    }, function(reason) {
      try {
        onFinally();
        reject(reason);
      } catch (e) {
        reject(e);
      }
    });
  });
};

promise.finally函数的作用是创建一个新的promise对象，并注册一个回调函数：onFinally。无论promise对象的状态是fulfilled还是rejected，都会执行onFinally函数。

Promise.all

Promise.all = function(promises) {
  return new Promise(function(resolve, reject) {
    var values = [];
    var count = 0;

    promises.forEach(function(promise) {
      promise.then(function(value) {
        values.push(value);
        count++;

        if (count === promises.length) {
          resolve(values);
        }
      }, function(reason) {
        reject(reason);
      });
    });
  });
};

Promise.all函数的作用是创建一个新的promise对象，并等待所有传入的promise对象都变为fulfilled状态，然后将所有promise对象的值作为数组返回。如果其中任何一个promise对象的状态变为rejected，那么Promise.all函数也会立即变为rejected状态，并返回第一个变为rejected状态的promise对象的原因。

Promise.race

Promise.race = function(promises) {
  return new Promise(function(resolve, reject) {
    promises.forEach(function(promise) {
      promise.then(function(value) {
        resolve(value);
      }, function(reason) {
        reject(reason);
      });
    });
  });
};

Promise.race函数的作用是创建一个新的promise对象，并等待所有传入的promise对象都变为fulfilled或rejected状态，然后立即变为fulfilled或rejected状态，并返回第一个变为fulfilled或rejected状态的promise对象的值或原因。

promise.allSettled

promise.allSettled = function() {
  return new Promise(function(resolve, reject) {
    var values = [];
    var count = 0;

    promises.forEach(function(promise) {
      promise.then(function(value) {
        values.push({ status: 'fulfilled', value: value });
        count++;

        if (count === promises.length) {
          resolve(values);
        }
      }, function(reason) {
        values.push({ status: 'rejected', reason: reason });
        count++;

        if (count === promises.length) {
          resolve(values);
        }
      });
    });
  });
};