手写promise(仅供参考)--钻研中

152 阅读5分钟

本文已参与[新人创作礼]活动,一起开启掘金创作之路

1.

class Promise{
  //因为promise是一个类所以用class声明(类是为了实现面向对象,创建了特殊的近类结构)
 constructor(executor){ 
   //因为new Promise((resolve, reject)=>{})所以需要传参,executor作为参数表示立即执行 每个class中都有一个constructor构造器
//成功
   let resolve=()=>{
   }
//失败  
 let reject=()=>{
 };
//  如果executor执行报错,直接执行reject
   executor(resolve,reject) ;
 }
}

2.

class Promise{

 constructor(executor){ 
//  初始态state为等待态
this.state='pending';//(state当前状态)
// 成功的值(不可转为其他状态)
this.value=undefined;
// 初始化value
this.reason=undefined;
//初始化结果
 //成功  
   let resolve=value=>{
  // 判断state
  if(this.state==='pending'){
    // resolve调用后,state为成功态fulfilled
    this.state='fulfilled';
    // 储存成功的值
    this.value=value;
  }; 
   }
//失败  
 let reject=reason=>{
  //  satate改变,reject调用就会失败
  if(this.state==='pending'){
    // reject调用后,state转为失败态
    this.state='rejected';
    // 储存失败的原因
    this.reason=reason;
  }
 };
//  如果executor执行报错,直接执行reject
try{
   executor(resolve,reject) ;
 //立即执行
   }catch(err){
     reject(err)
   }
 }
//  then方法 有两个参数 onFulfilled onRejected
then(onFulfilled,onRejected){
  // 状态为fulfilled,执行onFulfilled,传入成功的值
  if(this.state==='fulfilled'){
   onFulfilled(this.value);
  };
  // 状态为rejected,执行onRejected,传入失败的原因
  if(this.state==='Rejected'){
    onRejected(this.value);
  };
}
}

3.

class Promise{
 constructor(executor){   
this.state='pending';
this.value=undefined;
this.reason=undefined;
// 成功存放的数组
this.onResolvedCallbacks=[];
// 失败存放的数组
this.onRejectedCallbacks=[];
   let resolve=value=>{
  if(this.state==='pending'){
    this.state='fulfilled';
    this.value=value;
    // 一旦resolve执行,调用成功数组中的函数
    this.onResolvedCallbacks.forEach(fn=>fn());
  }; 
   }
 let reject=reason=>{
  if(this.state==='pending'){
    this.state='rejected';
    this.reason=reason;
    //一旦reject执行,调用失败数组的函数
    this.onRejectedCallbacks.forrEach(fn=>fn());
  }
 };
try{
   executor(resolve,reject) ;
   }catch(err){
     reject(err)
   }
 }
then(onFulfilled,onRejected){
  if(this.state==='fulfilled'){
   onFulfilled(this.value);
  };
  if(this.state==='Rejected'){
    onRejected(this.reason);
  };
  // 当状态state为pending时
  if(this.state==='pending'){
    // onFulfilled传入成功数组
    this.onResolvedCallbacks.push(()=>{   //数组不能直接存函数,可以将函数用对象包裹起来,箭头函数恰恰可以做到
      onFulfilled(this.value);
    })
    // onRejected传入到失败数组
    this.onRejectedCallbacks.push(()=>{
      onRejected(this.reason);
    })
  }
}
}

4.

class Promise{
  constructor(executor){   
 this.state='pending';
 this.value=undefined;
 this.reason=undefined;
 this.onResolvedCallbacks=[];
 this.onRejectedCallbacks=[];
    let resolve=value=>{
   if(this.state==='pending'){
     this.state='fulfilled';
     this.value=value;
     this.onResolvedCallbacks.forEach(fn=>fn());
   }; 
    }
  let reject=reason=>{
   if(this.state==='pending'){
     this.state='rejected';
     this.reason=reason;
     this.onRejectedCallbacks.forrEach(fn=>fn());
   }
  };
 try{
    executor(resolve,reject) ;
    }catch(err){
      reject(err)
    }
  }
 then(onFulfilled,onRejected){
  //  声明返回的promise2
  let promise2 = new Promise((resolve,reject)=>{
      if(this.state==='fulfilled'){ 
      let x= onFulfilled(this.value);
// resolvePromise函数,处理自己return的promise和默认的promise2的关系
     resolvePromise(promise2,x,resolve,reject);
   };   

   if(this.state==='Rejected'){
    let x=  onRejected(this.reason);
    resolvePromise(promise2,x,resolve,reject);
   };
   if(this.state==='pending'){
     this.onResolvedCallbacks.push(()=>{
      let x=  onFulfilled(this.value);
      resolvePromise(promise2,x,resolve,reject);
     })
     this.onRejectedCallbacks.push(()=>{
      let x=  onRejected(this.reason);
      resolvePromise(promise2,x,resolve,reject);
     })
   } 
  })
  // 返回promise,完成链式
  return promise2;
 }
 }

5.

class Promise{
  constructor(executor){   
 this.state='pending';
 this.value=undefined;
 this.reason=undefined;
 this.onResolvedCallbacks=[];
 this.onRejectedCallbacks=[];
    let resolve=value=>{
   if(this.state==='pending'){
     this.state='fulfilled';
     this.value=value;
     this.onResolvedCallbacks.forEach(fn=>fn());
   }; 
    }
  let reject=reason=>{
   if(this.state==='pending'){
     this.state='rejected';
     this.reason=reason;
     this.onRejectedCallbacks.forrEach(fn=>fn());
   }
  };
 try{
    executor(resolve,reject) ;
    }catch(err){
      reject(err)
    }
  }
 then(onFulfilled,onRejected){
  //  声明返回的promise2
  let promise2 = new Promise((resolve,reject)=>{
      if(this.state==='fulfilled'){ 
      let x= onFulfilled(this.value);
// resolvePromise函数,处理自己return的promise和默认的promise2的关系
     resolvePromise(promise2,x,resolve,reject);
   };   

   if(this.state==='Rejected'){
    let x=  onRejected(this.reason);
    resolvePromise(promise2,x,resolve,reject);
   };
   if(this.state==='pending'){
     this.onResolvedCallbacks.push(()=>{
      let x=  onFulfilled(this.value);
      resolvePromise(promise2,x,resolve,reject);
     })
     this.onRejectedCallbacks.push(()=>{
      let x=  onRejected(this.reason);
      resolvePromise(promise2,x,resolve,reject);
     })
   } 
  })
  // 返回promise,完成链式
  return promise2;
 }
 }
 function resolvePromise(promise2,x,resolve,reject){
  //  循环引用报错
  if(x===promise2){
    // reject报错
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  // 防止多次调用
  let called;
  // x不是null 且x是对象或函数
  if(x!=null&&(typeof x==='object'||typeof x==='function')){
    try {
      // A+规定,声明then=x的then方法
      let then=x.then;
      // 如果then是函数,就默认是promise了
      if(typeof then==='function'){
        // 就让then执行第一个参数是this 后面是成功的回调和失败的回调
        then.call(x,y=>{
          // 成功和失败只能调用一个
          if(called) return;
          called=true;
          // resolve的结果依旧是promise,那就继续解析
          resolvePromise(promise2,y,resolve,reject);
        },err=>{
          // 成功和失败只能调用一个
          if(called) return;
          called=true;
          reject(err);//失败
        })
      }else{
        resolve(x);//成功
      }
    }catch(e){
      // 也属于失败
      if(called) return;
      called=true;
      // 取then出错了那就不要再继续执行的
      reject(e);
    }
  }else{
    resolve(x)
  }
 }

6.

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    // onFulfilled如果不是函数,就忽略onFulfilled,直接返回value
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    // onRejected如果不是函数,就忽略onRejected,直接扔出错误
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        // 异步
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'rejected') {
        // 异步
        setTimeout(() => {
          // 如果报错
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          // 异步
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          // 异步
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      };
    });
    // 返回promise,完成链式
    return promise2;
  }
}

7.

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      };
    });
    return promise2;
  }
  catch(fn){
    return this.then(null,fn);
  }
}
function resolvePromise(promise2, x, resolve, reject){
  if(x === promise2){
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  let called;
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      let then = x.then;
      if (typeof then === 'function') { 
        then.call(x, y => {
          if(called)return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          if(called)return;
          called = true;
          reject(err);
        })
      } else {
        resolve(x);
      }
    } catch (e) {
      if(called)return;
      called = true;
      reject(e); 
    }
  } else {
    resolve(x);
  }
}
//resolve方法
Promise.resolve = function(val){
  return new Promise((resolve,reject)=>{
    resolve(val)
  });
}
//reject方法
Promise.reject = function(val){
  return new Promise((resolve,reject)=>{
    reject(val)
  });
}
//race方法 
Promise.race = function(promises){
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(resolve,reject)
    };
  })
}
//all方法(获取所有的promise,都执行then,把结果放到数组,一起返回)
Promise.all = function(promises){
  let arr = [];
  let i = 0;
  function processData(index,data){
    arr[index] = data;
    i++;
    if(i == promises.length){
      resolve(arr);
    };
  };
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      },reject);
    };
  });
}

8.

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      };
    });
    return promise2;
  }
  catch(fn){
    return this.then(null,fn);
  }
}
function resolvePromise(promise2, x, resolve, reject){
  if(x === promise2){
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  let called;
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      let then = x.then;
      if (typeof then === 'function') { 
        then.call(x, y => {
          if(called)return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          if(called)return;
          called = true;
          reject(err);
        })
      } else {
        resolve(x);
      }
    } catch (e) {
      if(called)return;
      called = true;
      reject(e); 
    }
  } else {
    resolve(x);
  }
}
Promise.resolve = function(val){
  return new Promise((resolve,reject)=>{
    resolve(val)
  });
}
Promise.reject = function(val){
  return new Promise((resolve,reject)=>{
    reject(val)
  });
}
Promise.race = function(promises){
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(resolve,reject)
    };
  })
}
Promise.all = function(promises){
  let arr = [];
  let i = 0;
  function processData(index,data){
    arr[index] = data;
    i++;
    if(i == promises.length){
      resolve(arr);
    };
  };
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      },reject);
    };
  });
}
// 语法糖
Promise.defer = Promise.deferred = function () {
  let dfd = {}
  dfd.promise = new Promise((resolve,reject)=>{
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
}
module.exports = Promise;
//npm install promises-aplus-tests 用来测试自己的promise 符不符合promisesA+规范
// 命令行 promises-aplus-tests js文件名

注:从多篇文章中学习所得,感谢互联网让学习更加方便