一步一步实现基于Task的Promise库（一）Promise的基本实现

如果我们现在有一个需求，大概是先读取一个文件的内容，再把得到的内容传给后台去解析，最后把解析后的结果再保存到那个文件，按照最原始的做法代码就是下面这个样子的：

//读取文件的原始内容
var readFile = function(fileName, callback){
    window.setTimeout(function(){
        console.log("read '" + fileName + "' complete.");
        var rawContent = "..... content ......";
        if(callback){
            callback(rawContent);
        }
    }, 2000);
};
//请求服务器来解析原始内容,得到真正的内容
var resolveFile = function(serverUrl, rawContent, callback){
    window.setTimeout(function(){
        console.log("resolve complete.");
        var realContent = "..... 内容 .....";
        if(callback){
            callback(realContent);
        }
    }, 1000);
};
//把真正的内容写入一开始的文件
var writeBack = function(fileName, realContent, callback){
    window.setTimeout(function(){
        console.log("writeBack complete.");
        if(callback){
            callback();
        }
    }, 2000);
};
readFile("aa.txt", function(rawContent){
    resolveFile("/service/fileResolve.ashx", rawContent, function(realContent){
        writeBack("aa.txt", realContent, function(){
            //给个完工的通知
            alert("everything is ok.");
        });
    });
});

这里我全部采用window.setTimeout来模拟一个异步操作，然而这种嵌套回调方法的做法看起来非常丑陋，如果能改掉嵌套的形式，采用链式调用会美观很多。因此我们期望的调用形式是下面这个样子：

//期望的调用形式(一) Promise的基本实现
 var taskExp1_1 = new Task(readFile, ["aa.txt"])
         .then(resolveFile, ["/service/fileResolve.ashx"])
         .then(writeBack, ["aa.txt"])
         .then(function(){
             alert("everything is ok.");
             this.end();
         })
         //do方法才是正真的执行这一组异步调用,不调用do方法相当于只是配置一组异步调用
         .do();

这种异步方法的链式调用实际上就是一个Promise的实现，只不过这里是通过一个Task类去完成的，我们的目标就是实现这个Task类，它包含了一组有先后逻辑依赖的异步操作，then方法里面传递的function并不会因为then的执行而执行，实际上then方法可以看做是对一组有先后逻辑依赖的异步操作的一个配置，真正导致执行的是do方法，调用do方法会从这个队列的头部开始调用，而标致一个异步操作的结束是在异步操作方法里面，看下面的代码：

//读取文件的原始内容
var readFile = function(fileName){
    var _this = this;
    window.setTimeout(function(){
        var rawContent = "xxxxxxxx (" + fileName + ")";
        console.log("read '" + fileName + "' complete. rawContent is " + rawContent);
        //告知异步调用已经完成
        _this.end(rawContent);
    }, 2000);
};

我们稍微对readFile方法做了修改，当文件读取完成的时候调用this.end方法通知异步操作的完成，这样Task就知道该进行下一个异步操作了，就会执行resolveFile方法，那么这里有一个问题就是readFile方法需要传递一个参数rawContent给resolveFile方法，可以看到this.end(rawContent);这句代码已经有传递，resolveFile方法如何接收呢？

//请求服务器来解析原始内容,得到真正的内容
var resolveFile = function(serverUrl){
    var _this = this;
    //可以从params属性中获取上一个异步调用传递过来的参数
    var rawContent = _this.params;
    window.setTimeout(function(){
        var realContent = "Greeting (" + serverUrl + ")";
        console.log("resolve file complete. realContent is " + realContent);
        _this.end(realContent);
    }, 1000);
};

 可以看到resolveFile方法通过this.params接收readFile的输出参数。

到目前为止，我们看到的都是如何使用Task类，那么我们最希望有一个什么样的库来完成这种逻辑配置关系呢？ 除了上面说的传参问题，还有一个就是我希望每一个异步操作都可以接收一些形参，这样我们使用Task类的时候就不用自己拐弯抹角的塞参数了，否则我们可能要这样写：

var taskExp1_1 = new Task(function (){
        readFile.call(this, "aa.txt");
    }).then(function (){
        resolveFile.call(this, "/service/fileResolve.ashx");
    }).then(function (){
        writeBack.call(this, "aa.txt");
    }).then(function () {
        alert("everything is ok.");
        this.end();
    })
    .do();

下面是整个demo和Task类的实现细节：

<script type="text/javascript">
    //读取文件的原始内容
    var readFile = function(fileName){
        var _this = this;
        window.setTimeout(function(){
            var rawContent = "xxxxxxxx (" + fileName + ")";
            console.log("read '" + fileName + "' complete. rawContent is " + rawContent);
            _this.end(rawContent);
        }, 2000);
    };
    //请求服务器来解析原始内容,得到真正的内容
    var resolveFile = function(serverUrl){
        var _this = this;
        var rawContent = _this.params;
        window.setTimeout(function(){
            var realContent = "Greeting (" + serverUrl + ")";
            console.log("resolve file complete. realContent is " + realContent);
            _this.end(realContent);
        }, 1000);
    };
    //把真正的内容写入一开始的文件
    var writeBack = function(fileName){
        var _this = this;
        var realContent = _this.params;
        window.setTimeout(function(){
            console.log("writeBack complete.");
            _this.end();
        }, 2000);
    };
    var WorkItem = function(func, args){
        return {
            //表示执行此异步操作的先决条件
            condition: "",
            //表示当前异步操作是否执行完了
            isDone: false,
            //正真的执行
            'do': function(context){
                func.call(context, args);
            }
        };
    };
    var Task = function(func, args){
        //Task内部会维护一个异步方法的队列,此队列严格按照先后顺序执行
        var wItemQueue = [];
        //当前异步方法
        var currentItem;
        //执行异步方法前要判断的先决条件集合(目前只有then)
        var condition = {
            //直接执行
            then: function(workItem){
                return true;
            }
        };
        //初始化一个异步操作,这个方法主要处理接受参数的多样性
        var _initWorkItem = function(func, args, condition){
            if(func instanceof Task){
                return null;
            }
            else{
                return _enqueueItem(new WorkItem(func, args), condition);
            }
        };
        //记录异步操作的先决条件,并添加到队列中去
        var _enqueueItem = function(item, condition){
            if(condition){
                item.condition = condition;
            }
            wItemQueue.push(item);
            return item;
        };
        //试着执行下一个异步操作,如果这个操作满足他的先决条件,那就执行
        var _tryDoNextItem = function(context){
            var next = _getCurNextItem();
            if(next){
                if(condition[next.condition](next)){
                    currentItem = next;
                    currentItem.do(context);
                }
            }
        };
        //获取下一个异步操作,如果已经是最后一个了返回undefined
        var _getCurNextItem = function(){
            var i=0;
            for(; i<wItemQueue.length; i++){
                if(currentItem == wItemQueue[i]){
                    break;
                }
            }
            return wItemQueue[i + 1];
        };
        //定义异步操作的上下文环境
        var Context = function(){};
        Context.prototype = {
            //上一个异步调用传递过来的参数
            'params': null,
            //执行此方法就表示当前异步操作已经完成,那么会尝试执行下一个异步操作
            end: function(output){
                currentItem.isDone = true;
                this.params = output;
                _tryDoNextItem(this);
                return this;
            }
        };
        currentItem = _initWorkItem(func, args);

        //Task的公共方法,这些方法都应该支持链式调用(都返回this)
        return {
            //开始执行
            'do': function(){
                if(currentItem && currentItem.condition == ""){
                    currentItem.do(new Context());
                }
                return this;
            },
            //配置下一个异步操作
            then: function(func, args){
                _initWorkItem(func, args, 'then');
                return this;
            }
        };
    };

    var taskExp_1 = new Task(readFile, ["aa.txt"])
            .then(resolveFile, ["/service/fileResolve.ashx"])
            .then(writeBack, ["aa.txt"])
            .then(function(){
                alert("everything is ok.");
                this.end();
            })
            .do();
</script>