自己实现了一个简单的Promise,用来分离开多重的异步嵌套代码,让代码美观好维护。
var Promise = function(fn){ //任务队列
this.taskQ = [];
//添加任务至队列
if(fn)this.then(fn);
};
Promise.prototype = {
//执行任务
resolve:function(){
//队列顶部的任务
var fn = this.taskQ && this.taskQ[0];
//存在任务
if(fn){
//执行
var ret = fn.apply(this,arguments);
//清除任务
this.taskQ.shift();
//如果有执行结果,将执行结果作为参数传给下一个任务
if(ret)
this.resolve.apply(this,ret);
}
return this;
},
//添加任务至任务队列
then:function(fn){
//过滤不是Function的参数
if(fn.constructor !== Function)return;
//添加至队列
this.taskQ.push(fn);
//返回this指针,进行链式操作
return this;
}
};
使用如下:
1、在任务中直接调用resolve方法执行下一个任务
var prom = new Promise()
.then(function(d){
var r = this;
console.log("当前第1步,接到任务:" + d);
//do something...
setTimeout(function(){
var d = "刷牙";
console.log("第1步完成,传递'" + d + "'任务至下一步");
r.resolve(1,d);
},1000);
})
.then(function(s,d){
var r = this;
console.log("当前第2步,从第" + s + "步接到任务:" + d);
//do something...
setTimeout(function(){
var d = "洗脸";
console.log("第2步完成,传递'" + d + "'任务至下一步");
r.resolve(2,d);
},1000);
})
.then(function(s,d){
var r = this;
console.log("当前第3步,从第" + s + "步接到任务:" + d);
//do something...
});
prom.resolve("起床");
2、直接返回值,返回值作为参数自动启动下一个任务(下一个任务存在的情况下)
var prom = new promise(function(d){
console.log("当前第1步,接到任务:" + d);
return [1,"刷牙"];
})
.then(function(s,d){
console.log("当前第2步,从第" + s + "步接到任务:" + d);
return [2,"洗脸"];
})
.then(function(s,d){
console.log("当前第3步,从第" + s + "步接到任务:" + d);
});
prom.resolve("起床");