深入Promise对象及其封装源码实现

最新推荐文章于 2022-10-27 17:38:59 发布

原创最新推荐文章于 2022-10-27 17:38:59 发布 · 733 阅读

0 ·

CC 4.0 BY-SA版权

ES6 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨Promise对象，解析其三种状态之间的转换，并详细介绍了Promise的基本用法，包括then方法的链式调用原理。同时，通过示例讲解了Promise.all和Promise.race的行为。文章还提供了一个Promise的模拟实现，总结了Promise的主要特点，如初始的pending状态、状态不可变以及then方法的返回特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Promise的含义
Promise是一个状态集，有三种状态，关系如下：

pending(就绪状态)  ----->  resolved (成功状态)
pending(就绪状态)  ----->  rejected (失败状态)

其中初始为就绪状态，然后转为成功或失败态！
2. 基本用法

var p = new Promise(function(resolved,rejected){
	//此处使用一个随机数模拟异步请求的成功或者失败的随机性
	var num = Math.random() *100;
	if( num > 50){     //模拟成功
		resolved(num);               //  状态改变为resolved
	}else{             //模拟失败
		rejected("失败：" + num);    //   状态改变为rejected
	}
});
//然后我们调用p.then(fnA,fnB);
参数fnA(data){}是一个函数，表示状态改变为resolved后要执行的回调函数,其参数data就是传入到resolved的参数；
参数fnB(err){}是一个函数，表示状态改变为rejected后要执行的回调函数其参数err就是传入到rejected的参数；

实例方法Promise.prototype.then
then()方法支持链式调用（因为会返回一个Promise对象），但如果前一个then()的fnA或fnB返回的是一个常值（数组、数字、字符串、对象），会默认状态为成功，因此后一个then会执行成功的方法！即后面的then是根据前一个then返回的Promise对象的状态来决定执行那个函数的！
Promise.all、Promise.race
Promise.all([p1,p2,p3]).then();当参数内的所有Promise对象都为resolved状态时，才会执行then内的成功方法，否则就执行失败的函数！
Promise.all([p1,p2,p3]).then();当参数内的只要有一个Promise对象先变为resolved状态，就会执行then内的成功方法！
封装常用方法

//  封装异步加载图片
const loadUrl = ( url ) => new Promise( ( resolved,rejected )=>{
	let img = new Image();
	img.onload = () => resolved(img);
	img.onerr = () => rejected( new Error("not load imag at " + url) ); 
	img.src = url;
} ); 

//  封装基于jQuery的AJAX
const myAjax = ( type = "GET", data = {}, url) =>{
	new Promise( ( resolved,rejected )=>{
		$.ajax({
			type ,
			url ,
			data,
			success : data => resolved(data),
			error : err => rejected(err)
		});
	} ); 
}

一、模拟实现Promise对象

var p = new Promise(function(resolved,rejected){
console.log('1');
resolved('2');
});
p.then(data => console.log(data));
console.log('3');
//输出顺序: 1 3 2
//为什么没有异步，还会是这样的顺序呢？
//因为内部使用了setTimeout

总结一下Promise对象的特点

默认是pendding状态，调用resolved()或rejected()函数改变状态，且状态改变后不能再次改变
Promise(fn); 参数必须是一个function，且fn函数会立即执行
Promise对象能够调用then(fn1,fn2)函数
then()函数返回Promise对象，支持链式调用

function myPromise(fn){
  if( typeof fn !== "function"){   // 检验参数必须是function
    throw Error(`Promise resolver ${fn} is not a function`);
  }
  this.data = null;
  this.status = "pedding";
  var self = this;

  function resolved(data){       //改变相对应的状态
    if(self.status == "pedding"){    //状态不是pedding就不能再次改变
      self.status = "resolved";
      self.data = data;
    }

  }
  function rejected(err){
    if(self.status == "pedding"){ 
      self.status = "rejected";
      self.data = err;
    }

  }
  fn(resolved,rejected);     //执行myPromise对象的参数函数
}

myPromise.prototype.then = function(onResolved,onRejected){
  var self = this;
  if(this.status == "resolved"){    //在原型上的方法，此处的this就是指向myPromise的实例
    return new myPromise(function(resolved,rejected){    //如果状态是resolved，then就会执行resolved()函数，并返回一个myPromise对象
      var res = onResolved(self.data);   //执行成功的函数onResolved(),并保存结果
      if(res instanceof myPromise){     //如果结果是myPromise对象，就使用then方法判断状态
        res.then(resolved,rejected);
      }else{                              //如果结果不是myPromise对象，默认使用成功函数
        resolved(res);
      }
    });
  }  
  if(this.status == "rejected"){    //同上
    return new myPromise(function(resolved,rejected){
      var res = onRejected(self.data);
      if(res instanceof myPromise){
        res.then(resolved,rejected);
      }else{
        resolved(res);
      }
    });
  }  
};

//测试1
var p = new myPromise(function(resolved,rejected){
  rejected(123);
});
console.log(p.then( data => data,data => data+'err1').then(data => data,data => data+'err2'));
结果：myPromise { data: '123err1', status: 'resolved' }
//测试2
var p2 = new myPromise(function(resolved,rejected){
  setTimeout(function(){
    resolved(12345);
  },5000);
});
//测试2-1
console.log(p2);
setTimeout(function(){
 console.log(p2); 
},6000);
//结果：myPromise { data: null, status: 'pedding' } （过6秒）myPromise { data: 12345, status: 'resolved' }
//测试2-2
console.log(p2.then(data => data));
//没有结果？  why?????
//  console.log()好像一直没有执行！
//不禁想到setTimeout是在主函数执行完以后才会执行的！，也就是说p2.then(data => data)是在setTimeout之前执行的！！
//而在setTimeout执行之前，p2一直是pendding状态。但then方法里只有resolved和rejected状态的处理。
//   这时，问题就明确了！！！
//看一下then方法,添加上对pendding状态的处理

myPromise.prototype.then = function(onResolved,onRejected){
  var self = this; 
  if(this.status == "pedding"){        // 状态为pendding时的处理
    return new myPromise(function(resolved,rejected){     //只要走zhen方法就会返回一个myPromise对象
      // 此时状态是pedding，因此resolved()、rejected()函数还不能执行。把对应的处理函数存起来！！但异步执行完之后，在执行处理函数
      // 将处理函数存在myPromise对象上的两个数组内：  this.resolvedArr = [];   this.rejectedArr = [];
      self.resolvedArr.push((function(onResolved){   //通过立即执行函数将处理函数及其状态保存进数组
        return function(){
          var res = onResolved(self.data);
          if(res instanceof myPromise){
            res.then(resolved,rejected);
          }else{
            resolved(res);
          }
        }
      })(onResolved));
    });
  }
};
//这样就解决了测试2-2的问题，不信你试一试

二、完整版

// 完成版
function myPromise(fn){
  if( typeof fn !== "function"){   // 检验参数必须是function
    throw Error(`Promise resolver ${fn} is not a function`);
  }
  this.data = null;
  this.status = "pedding";
  this.resolvedArr = [];   //  将处理函数放进数组里
  this.rejectedArr = [];
  var self = this;

  function resolved(data){       
    setTimeout(function(){     //   达到开头提到的输出顺序为132的效果
          if(self.status == "pedding"){    //状态不是pedding就不能再次改变
            self.status = "resolved";
            self.data = data;
      self.resolvedArr.forEach(fn => fn());  // 状态改变时，执行存放在数组中的处理函数
    }

  },0);


  }
  function rejected(err){
    setTimeout(function(){
      if(self.status == "pedding"){ 
        self.status = "rejected";
        self.data = err;
      }
    },0);


  }
  fn(resolved,rejected);    
}
myPromise.prototype.then = function(onResolved,onRejected){
  var self = this;
  if(this.status == "resolved"){   
    return new myPromise(function(resolved,rejected){    
      var res = onResolved(self.data);   
      if(res instanceof myPromise){     
        res.then(resolved,rejected);
      }else{                              
        resolved(res);
      }
    });
  }  
  if(this.status == "rejected"){   
    return new myPromise(function(resolved,rejected){
      var res = onRejected(self.data);
      if(res instanceof myPromise){
        res.then(resolved,rejected);
      }else{
        resolved(res);
      }
    });
  }  
  if(this.status == "pedding"){        
    return new myPromise(function(resolved,rejected){     
      self.resolvedArr.push((function(onResolved){   
        return function(){
          var res = onResolved(self.data);
          if(res instanceof myPromise){
            res.then(resolved,rejected);
          }else{
            resolved(res);
          }
        }
      })(onResolved));
      self.rejectedArr.push((function(onRejected){   
        return function(){
          var res = onRejected(self.data);
          if(res instanceof myPromise){
            res.then(resolved,rejected);
          }else{
            resolved(res);
          }
        }
      })(onRejected));

    });
  }
};