es5实现promise，多异步请求返回数据

Posted 2020-10-07

  最近研究es6的promise觉得非常好用，还有jquery的 $.Deferred()、node里面的Q模块，都研究了一遍，于是自己用es5写了一个类似的promise功能

 首先模块代码

  1 var Q = {};
  2 Q.deffer = function() {
  3     var fn = {};
  4     var resolve = null;
  5     var reject = null;
  6     var done = null;
  7     var promis = {
  8         then: function(resolved, rejected) {
  9             resolve = resolved || function() {};
 10             reject = rejected || function() {};
 11             return promis;
 12         },
 13         done: function(doned) {
 14             done = doned || function() {};
 15             return promis;
 16         }
 17     };
 18 
 19     fn.promise = function() {
 20         return promis;
 21     };
 22 
 23     fn.resolve = function(data) {
 24         setTimeout(function() {
 25             if(resolve) {
 26                 resolve(data);
 27             }
 28             if(done) {
 29                 done();
 30             }
 31         }, 0)
 32 
 33     };
 34 
 35     fn.reject = function(data) {
 36         setTimeout(function() {
 37             if(reject) {
 38                 reject(data);
 39             }
 40             if(done) {
 41                 done();
 42             }
 43         }, 0)
 44 
 45     };
 46 
 47     return fn;
 48 }
 49 
 50 Q.all = function(list) {
 51     var fn = {};
 52     var resolve = null;
 53     var reject = null;
 54     var done = null;
 55     var resolveList = [];
 56     var rejectList = [];
 57     var promis = {
 58         then: function(resolved, rejected) {
 59             resolve = resolved || function() {};
 60             reject = rejected || function() {};
 61             return promis;
 62         },
 63         done: function(doned) {
 64             done = doned || function() {};
 65             return promis;
 66         }
 67     };
 68     
 69     var count = 0;
 70 
 71     for(var i = 0; i < list.length; i++) {
 72             try {
 73                 list[i].then(function(data) {
 74                     resolveList.push(data);
 75                     if(resolveList.length == list.length) {
 76                         if(resolve) {
 77                             resolve(resolveList);
 78                         }
 79                     }
 80                 }, function(data) {
 81                     rejectList.push(data);
 82                     if(reject) {
 83                         reject(data);
 84                     }
 85                 }).done(function() {
 86                     count++;
 87                     if(count >= list.length) {
 88                         if(done) {
 89                             done(resolveList,rejectList);
 90                         }
 91                     }
 92                 });
 93             } catch(e) {
 94                 if(done) {
 95                     done(resolveList,rejectList,e);
 96                 }
 97             }
 98 
 99     }
100     
101     
102     
103     return promis;
104 };

使用例子1

function _delay(time) {
			var def = Q.deffer();

			if(time == 1) {
				def.resolve({
					"正确": "success"
				});

			} else {
				def.reject({
					"错误": "error"
				});
			}

			return def.promise();
		}

		_delay(0).then(function(data) {
			console.log("then");
			console.log(data);

		}, function(err) {
			console.log(err);
		}).done();

　　使用例子2

function request(){
		var deferred = Q.deffer();
		$.ajax({
			type:"get",
			url:"xxxxxxxxxxx",
			success:function(data){
				deferred.resolve(data);
			},
			error:function(error){
				deferred.resolve(error);
			}
		});	
		
		return deferred.promise();
	}
request().then(function(data){
			console.log(data);
		},function(err){
			console.log(err);
		}).done();

　　Q.all的用法，多个异步操作

function request(){
		var deferred = Q.deffer();
		$.ajax({
			type:"get",
			url:"xxxxx",
			success:function(data){
				deferred.resolve(data);
			},
			error:function(error){
				deferred.resolve(error);
			}
		});	
		
		return deferred.promise();
	}
var promiseArr = [];
	
    promiseArr.push(request());
    promiseArr.push(request());
	Q.all(promiseArr).then(function(data){
		console.log(data);
	},function(er){
		console.log(er);
	}).done(function(resolve,reject,e){
		console.log(‘done‘);
	});