写个 JavaScript 异步调用框架 (Part 3 - 代码实现)

核心提示： yield方法最后，我们要实现yield方法，写个 JavaScript 异步调用框架 (Part 3 - 代码实现)(2)，它需要将callbackQueue中的回调函数逐个取出来，然后都调用一遍，我们现在可以用嵌套addCallback的方式来书写，但随着嵌套层数的增多，并且保证这个操

yield方法

最后，我们要实现yield方法。它需要将callbackQueue中的回调函数逐个取出来，然后都调用一遍，并且保证这个操作是异步吧。

this.yield = function(result) {
　 var self = this;
　 setTimeout(function() {
　 　 self.result = result;
　 　 self.state = "completed";
　 　 self.completed = true;
　 　 while (callbackQueue.length > 0) {
　 　 　 var callback = callbackQueue.shift();
　 　 　 callback(self.result);
　 　 }
　 }, 1);
　 return this;
}

通过使用setTimeout，我们确保了yield的实际操作是异步进行的。然后我们把用户传入yield的结果及相关状态更新到对象属性之上，最后遍历callbackQueue调用所有的回调函数。

小结

这样我们就做好了一个简单的JavaScript异步调用框架，完整的代码可以看这里：异步调用框架Cat.Async.Operation。

var Cat = {};

Cat.Async = {
　　　 Operation: function() {
　　　　　　　 var callbackQueue = [];
　　　　　　　 this.result = undefined;
　　　　　　　 this.state = "waiting";
　　　　　　　 this.completed = false;

　　　　　　　 this.yield = function(result) {
　　　　　　　　　　　 var self = this;
　　　　　　　　　　　 setTimeout(function() {
　　　　　　　　　　　　　　　 self.result = result;
　　　　　　　　　　　　　　　 self.state = "completed";
　　　　　　　　　　　　　　　 self.completed = true;

　　　　　　　　　　　　　　　 while (callbackQueue.length > 0) {
　　　　　　　　　　　　　　　　　　　 var callback = callbackQueue.shift();
　　　　　　　　　　　　　　　　　　　 callback(self.result);
　　　　　　　　　　　　　　　 }
　　　　　　　　　　　 }, 1);
　　　　　　　　　　　 return this;
　　　　　　　 };

　　　　　　　 this.addCallback = function(callback) {
　　　　　　　　　　　 callbackQueue.push(callback);
　　　　　　　　　　　 if (this.completed) {
　　　　　　　　　　　　　　　 this.yield(this.result);
　　　　　　　　　　　 }
　　　　　　　　　　　 return this;
　　　　　　　 };
　　　 }
};

这个框架能够很好的解决调用栈中出现同步异步操作并存的情况，假设所有函数都返回Cat.Async.Operation，框架的使用者可以使用一种统一的模式来编写代码，处理函数返回，而无需关心这个函数实际上是同步返回了还是异步返回了。

对于串行调用多个异步函数的情况，我们现在可以用嵌套addCallback的方式来书写，但随着嵌套层数的增多，代码会变得越来越不美观：

firstAsyncOperation().addCallback(function() {
　 secondAsyncOperation().addCallback(function() {
　 　 thirdAsyncOperation().addCallback(function() {
　 　 　 finalSyncOperation();
　 　 });
　 });
});

我们能否把嵌套形式改为jQuery风格的链式写法呢？这是我们接下来要思考的问题。

系列文章：

写个 JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

写个 JavaScript 异步调用框架 (Part 2 - 用例设计)