Schematic Promise implementation principle (four) – Promise static method implementation

class Promise {
  callbacks = [];
  state = 'pending'; // Add status value = null; Constructor (fn) {fn(this._resolve.bind(this), this._reject. Bind (this)); }then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this._handle({
        onFulfilled: onFulfilled || null,
        onRejected: onRejected || null,
        resolve: resolve,
        reject: reject
      });
    });
  }
  catch(onError) {
    return this.then(null, onError);
  }
  finally(onDone) {
    if(typeof onDone ! = ='function') return this.then();
 
    let Promise = this.constructor;
    return this.then(
      value => Promise.resolve(onDone()).then(() => value),
      reason => Promise.resolve(onDone()).then(() => { throw reason })
    );
  }
  _handle(callback) {
    if (this.state === 'pending') {
      this.callbacks.push(callback);
      return;
    }
 
    let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
 
    if(! If cb) {/ /thenCb = this.state ==='fulfilled' ? callback.resolve : callback.reject;
      cb(this.value);
      return;
    }
 
    let ret;
 
    try {
      ret = cb(this.value);
      cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
    } catch (error) {
      ret = error;
      cb = callback.reject
    } finally {
      cb(ret);
    }
 
  }
  _resolve(value) {
 
    if (value && (typeof value === 'object' || typeof value === 'function')) {
      var then = value.then;
      if (typeof then= = ='function') {
        then.call(value, this._resolve.bind(this), this._reject.bind(this));
        return;
      }
    }
 
    this.state = 'fulfilled'; This. value = value; // save the result this.callbacks. ForEach (callback => this._handle(callback)); } _reject(error) { this.state ='rejected'; this.value = error; this.callbacks.forEach(callback => this._handle(callback)); }}Copy the code

Resolve, promise.Reject, Promise.all, and promise.race. The implementation of other static methods is similar.

Promise.resolve('foo'New Promise(resolve => resolve();'foo'))Copy the code

Resolve is an instance of a Promise. If the Promise. Resolve argument is an instance of a Promise, the promise. resolve instance will be returned unchanged. If it is a basic datatype, such as the string in the example above, promise.resolve will return a new Promise instance. This makes promise.resolve useful to ensure consistent behavior when it’s not clear whether the object we’re getting is a Promise instance. Look at an example:

const Id2NameMap = {};
const getNameById = function (id) {
 
  if (Id2NameMap[id]) return Id2NameMap[id];
 
  return new Promise(resolve => {
    mockGetNameById(id, function(name) { Id2NameMap[id] = name; resolve(name); })}); } getNameById(id).then(name => { console.log(name); });Copy the code

In order to reduce requests, we often cache data. After obtaining the name corresponding to the ID, we store it in the Id2NameMap object. Next time we request the name corresponding to the ID through the ID, we first check whether there is Id2NameMap. If yes, return the corresponding name. If no, initiate an asynchronous request. After obtaining Id2NameMap, put it in Id2NameMap.

Promise.resolve(getNameById(id)).then(name => {
  console.log(name);
});Copy the code

That way, no matter what getNameById(ID) returns, the logic is fine. Look at the following Demo:

let thenable = {
  then: function(onFulfilled) { onFulfilled(42); }};Copy the code

The promise. resolve method converts this object to a Promise, and then immediately executes the thenable object’s then method.

let thenable = {
  then: function(onFulfilled) { onFulfilled(42); }};let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});Copy the code

As soon as the thenable object’s THEN method executes, object P1 will be in the resolved state and the callback specified by the last THEN method will execute immediately, printing 42.

static resolve(value) {
  if (value && value instanceof Promise) {
    return value;
  } else if (value && typeof value === 'object' && typeof value.then === 'function') {
    let then = value.then;
    return new Promise(resolve => {
      then(resolve);
    });
 
 
  } else if (value) {
    return new Promise(resolve => resolve(value));
  } else {
    returnnew Promise(resolve => resolve()); }}Copy the code

Reject is similar to promise. resolve, except that promise. reject always returns a Promise instance of the state Rejected, The Promise. Resolve parameter, if it is a Promise instance, returns the corresponding Promise instance, so the state is not necessarily the same.

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('p1'), 1000)
})
 
 
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('p2'), 5000)
})
 
Promise.all([p1, p2]).then(rets => {
   console.log(rets) // ['p1'.'p2']})Copy the code

Promise.all is implemented as follows:

static all(promises) {
  return new Promise((resolve, reject) => {
    let fulfilledCount = 0
    const itemNum = promises.length
    const rets = Array.from({ length: itemNum })
    promises.forEach((promise, index) => {
      Promise.resolve(promise).then(result => {
        fulfilledCount++;
        rets[index] = result;
        if(fulfilledCount === itemNum) { resolve(rets); } }, reason => reject(reason)); })})}Copy the code

Promise. All implementation source code

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('p1'), 1000)
})
 
 
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('p2'), 5000)
})
 
Promise.race([p1, p2]).then(ret => {
   console.log(ret) // 'p1'
})Copy the code

Promise.race is implemented as follows:

static race(promises) {
  return new Promise(function (resolve, reject) {
    for (let i = 0; i < promises.length; i++) {
      Promise.resolve(promises[i]).then(function (value) {
        return resolve(value)
      }, function (reason) {
        return reject(reason)
      })
    }
  })
}Copy the code