手写Promise源码深入了解其原理

手写Promise源码深入了解其原理

技术杂谈小彩虹2021-08-27 2:04:28130A+A-

想了解JS Promise具体怎么使用,请看【ES6基础知识】promise和await/async

为了更深入了解其原理,下面动手重写Promise源码

如有不对,欢迎指正。此文适合自己手动实践,能让自己功力大增。

重写MyPromise,基于它再重写then、catch、resolve、reject、finally

MyPromise

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

function MyPromise(executor) {
  let self = this;
  this.status = PENDING;
  this.onFulfilled = [];//成功的回调
  this.onRejected = []; //失败的回调
  function resolve(value) {
    if (self.status === PENDING) {
      self.status = FULFILLED;
      self.value = value;
      // 
      self.onFulfilled.forEach(fn => fn()); //PENDING状态执行,如果前面多个then都是PENDING状态,就是数组,最后面一个then是FULFILLED状态,就是执行数组
    }
  }
  function reject(reason) {
    if (self.status === PENDING) {
      self.status = REJECTED;
      self.reason = reason;
      self.onRejected.forEach(fn => fn());
    }
  }
  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}

then

then支持链式调用,所以要用数组,then中根据状态来控制所执行的内容

MyPromise.prototype.then = function (onFulfilled, onRejected) {
  // onFulfilled 和 onRejected必须是函数类型
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };
  let self = this;
  let promiseInstance = new MyPromise(
    (resolve, reject) => {
      // then中执行函数(onFulfilled, onRejected)是微任务
      if (this.status === FULFILLED) {
        // 不会变成其它状态
        setTimeout(() => {
          try {
            // 必须在promise变成 fulfilled 时,调用 onFulfilled,参数是promise的value
            // 在promise的状态不是 fulfilled 之前,不能调用
            // onFulfilled 只能被调用一次
            let x = onFulfilled(self.value);
            resolvePromise(promiseInstance, x, resolve, reject);
          } catch (error) {
            reject(e);
          }
        })
      } else if (self.status === REJECTED) {
        // 不会变成其它状态
        setTimeout(() => {
          try {
            let x = onRejected(self.reason);
            resolvePromise(promiseInstance, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        });
      } else if (self.status === PENDING) {
        // 可以变成 fulfilled 或者是 rejected
        // then方法可能被多次调用
        // 如果promise变成了 fulfilled态,所有的onFulfilled回调都需要按照then的顺序执行
        // 如果promise变成了 rejected态,所有的onRejected回调都需要按照then的顺序执行
        self.onFulfilled.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(self.value);
              resolvePromise(promiseInstance, x, resolve, reject);
            } catch (e) {
              // 如果 onFulfilled执行时抛出异常e,promiseInstance需要被reject
              reject(e);
            }
          });
        });
        self.onRejected.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(self.reason);
              resolvePromise(promiseInstance, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          });
        });
      }
    }
  )
  // then必须返回一个promise
  return promiseInstance
}
function resolvePromise(promiseInstance, x, resolve, reject) {
  let self = this;
  if (promiseInstance === x) {
    reject(new TypeError('Chaining cycle'));
  }
  // 如果 x 是一个 object 或者 是一个 function
  if (x && typeof x === 'object' || typeof x === 'function') {
    let used; //只能调用一次
    // 
    try {
      // 有.then
      let then = x.then;
      if (typeof then === 'function') {
        // 如果 then 是一个函数,then.call(x, resolvePromiseFn, rejectPromiseFn)
        then.call(x, (y) => {
          // // 调用then函数的resolvePromiseFn
          if (used) return;
          used = true;
          // then是链式,所以后面then执行的函数一样
          resolvePromise(promiseInstance, y, resolve, reject);
        }, (r) => {
          // 调用then函数的rejectPromiseFn
          if (used) return;
          used = true;
          reject(r);
        });
      } else {
        // 不是函数,直接fulfill
        if (used) return;
        used = true;
        resolve(x);
      }
    } catch (e) {
      // x.then出错
      if (used) return;
      used = true;
      reject(e);
    }
  } else {
    // x 不是一个 object 或者 是一个 function
    resolve(x);
  }
}

catch

catch底层调用的是then,只不过resolved不执行

MyPromise.prototype.catch = function (onRejected) {
  this.then(null, onRejected);
}

resolve

  1. MyPromise.resolve返回一个以给定值解析后的Promise 对象
  2. 如果 value 是个 thenable 对象,返回的promise会“跟随”这个thenable的对象,采用它的最终状态
  3. 如果传入的value本身就是promise对象,那么Promise.resolve将不做任何修改、原封不动地返回这个promise对象
  4. 其他情况,直接返回以该值为成功状态的promise对象。
MyPromise.resolve = function (param) {
  if (param instanceof MyPromise) {
    return param;
  }
  return new MyPromise((resolve, reject) => {
    if (param && param.then && typeof param.then === 'function') {
      setTimeout(() => {
        param.then(resolve, reject);
      });
    } else {
      resolve(param);
    }
  });
}

reject

参数会原封不动地作为reject的理由,变成后续方法的参数。

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

finally

finally底层调用的是then,FULFILLED和REJECTED都会执行,并且还能继续then,还会将值原封不动的传递给后面的then,所以返回的是一个Promise.resolve(返回Promise.resolve的原因是不管FULFILLED和REJECTED都会执行一个函数,并且还能把值往后传继续then)

MyPromise.prototype.finally = function (callback) {
  return this.then((value) => {
    return MyPromise.resolve(callback()).then(() => {
      return value;
    });
  }, (err) => {
    return MyPromise.resolve(callback()).then(() => {
      throw err;
    });
  });
}

实例

const myPromise1 = (time, res) => new MyPromise(resolve => {
  setTimeout(() => { resolve(res) }, time);
})

const myPromise2 = (time, res) => new MyPromise((resolve, reject) => {
  throw new Error('async error!')
  reject(new Error('test'));   //有了throw,此处不会执行
})

myPromise1(600, 'myPromise1').then((res) => { 
  console.log(res)  //myPromise1
}).catch((err) => {
  console.log('final catch error:', err)
})

> myPromise1

myPromise2(600, 'myPromise2').then((res) => { 
  console.log(res) 
}).catch((err) => {
  console.log('final catch error:', err)
})

>
 final catch error: Error: async error!
 at .../Promise.js:407:9

使用原生Promise重写all、race、allSettled、any、finally

Promise类公共代码

class PromiseCls {
  constructor() {
    this.tasks = [];
  }
  addAsync(task){
    this.tasks.push(task)
  }
  // 所有都变成resolved或者任何一个变成reject
  all(){ ... }
  // 只要有一个状态改变就结束
  race(){  ... }
  // 只有等到所有参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束
  allSettled(){ ... }
  any(){ ... }
}

const timeout = (time,res) => new Promise(resolve => {
  setTimeout(()=>{resolve(res)}, time);
})

const rejectAsync = (time,res) => new Promise((resolve, reject) => {
  throw new Error('async error!')
  reject(new Error('test'));   //有了throw,此处不会执行
})

const notPromise = () => 'not Promise'

let promise = new PromiseCls();

all

all(){
   let promiseArr = this.tasks;
   return new Promise((resolve, reject)=>{
    let resArr = [];
    let index = 0;
    for(let i=0,len=promiseArr.length; i<len; i++){
      //如果不是Promise实例需要转化为Promise实例
      Promise.resolve(promiseArr[i]).then(res => {
      //promiseArr[i].then(res => {
        index++;
        // console.log(res) //not Promise, 3, 4, 2, 1
        resArr[i] = res; //i得对应上
        if( index === len){
          resolve(resArr);
        }
      }).catch(e => {
        console.log('one promise error:'+e)
        reject(e)
      }); 
    }
  }).catch((err)=> {
    throw new Error('all function:' + err) 
  })
}

promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(timeout(400, '4'));
promise.addAsync(notPromise());
promise.all().then((res)=>{console.log(res)})  
> 
[ '1', '2', '3', '4', 'not Promise' ]    按照顺序输出

promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(rejectAsync(400, '4'));
promise.all().then((res)=>{console.log(res)}).catch((err)=> {
  console.log('final catch error:',err)
})

>
one promise error:Error: async error!
final catch error: Error: all function:Error: async error! at .../Promise.js:28:13 promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(rejectAsync(400, '4'));
promise.addAsync(rejectAsync(200, '4'));
promise.all().then((res)=>{console.log(res)}).catch((err)=> {
  console.log('final catch error:',err)
})

>
one promise error:Error: async error!
one promise error:Error: async error!
final catch error: Error: all function:Error: async error! at .../Promise.js:28:13 

race

// 只要有一个状态改变就结束,如果不是Promise实例需要转化为Promise实例
race(){
  let promiseArr = this.tasks;
  return new Promise((resolve, reject)=>{
    for(let i=0,len=promiseArr.length; i<len; i++){
      Promise.resolve(promiseArr[i]).then(res => {
     // promiseArr[i].then(res => {
        resolve(res) //一经改变就不再可变
      }).catch(e => {
        console.log('one promise error:'+e)
        reject(e)
      }); 
    }
  }).catch((err)=> {
    throw new Error('all function:' + err) 
  })
}
  
promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(timeout(400, '4'));

promise.race().then((res)=>{console.log(res)})  
> 3

promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(rejectAsync(400, '4'));
promise.addAsync(rejectAsync(200, '4'));
promise.race().then((res)=>{console.log(res)}).catch((err)=> {
  console.log('final catch error:',err)
})

>
one promise error:Error: async error!
one promise error:Error: async error!
final catch error: Error: all function:Error: async error! at .../Promise.js:28:13 

allSettled

 // 不管是成功还是失败,都要全部执行完,所以需要考虑到finally
  // 无论请求对错最终都会返回一个数组对象 到 .then 中,并切返回的数据中标识了错误跟正确数据的区别
allSettled(){
  let promiseArr = this.tasks;
  return new Promise((resolve) => {
    let sttled = 0
    let resArr = []
    for(let i=0,len=promiseArr.length; i<len; i++){
      Promise.resolve(promiseArr[i])
      .then(res => { 
        resArr[i] = res; 
        // resArr[i] = {
          // status: 'fulfilled',
          // value: res
          // }
      })
      .catch(err => { 
        resArr[i] = err; 
        // resArr[i] = {
          // status: 'rejected',
          // reason: err
          // } 这么输出更清晰
      })
      .finally(() => { ++sttled === promiseArr.length && resolve(resArr) })
    }
  }) 
}


promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(notPromise());
promise.addAsync(rejectAsync());
promise.addAsync(rejectAsync());
promise.allSettled().then((res)=>{console.log(res)}).catch((err)=> {
  console.log('final catch error:',err)
})

>
[
  '1',
  '2',
  '3',
  'not Promise',
  Error: async error!
      at .../Promise.js:107:9
  Error: async error!
      at .../Promise.js:107:9
]

any

子Promise中任意一个Promise完成时,就触发.then,成功触发.then中第一个方法,失败触发.then中第二个方法

 // 只要一个成功就成功,失败要全部执行完
any(){
  let promiseArr = this.tasks;
  return new Promise((resolve, reject)=>{
    let index = 0
    let resArr = []
    for(let i=0,len=promiseArr.length; i<len; i++){
      Promise.resolve(promiseArr[i]).then(res => {
      // promiseArr[i].then(res => {
        resolve(res)
      }).catch(e => {
        index++ 
        resArr.push(e);
        if(index==promiseArr.length){
          reject(resArr)
          console.log('one promise error:'+e)
        }
      })
    }
  })
  // .catch((err)=> {
  // throw new Error('all function:' + err) 
  // })
}
  
promise.addAsync(timeout(600, '1'));
promise.addAsync(timeout(500, '2'));
promise.addAsync(timeout(300, '3'));
promise.addAsync(notPromise());
promise.addAsync(rejectAsync());
promise.addAsync(rejectAsync());
promise.any().then((res)=>{console.log(res)}).catch((err)=> {
  console.log('final catch error:',err)
})

> not Promise


promise.addAsync(rejectAsync());
promise.addAsync(rejectAsync());
promise.any().then((res)=>{console.log(res)}).catch((err)=> {
  console.log('final catch error:',err)
})
>
[
  Error: async error!
      at .../Promise.js:107:9
  Error: async error!
      at .../Promise.js:107:9
]

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们