JavaScript异步调用框架的代码实现

在上一篇文章里，我们说到了要实现一个用于JavaScript异步调用的Async.Operation类，通过addCallback方法传递回调函数，并且通过yield方法返回回调结果。现在我们就来实现这个类吧。

目前创新互联建站已为近千家的企业提供了网站建设、域名、网页空间、网站改版维护、企业网站设计、马山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

类结构

首先我们来搭一个架子，把需要用到的似有变量都列出来。我们需要一个数组，来保存回调函数列表；需要一个标志位，来表示异步操作是否已完成；还可以学IAsyncResult，加一个state，允许异步操作的实现者对外暴露自定义的执行状态；最后加一个变量保存异步操作结果。

 
 
 

  
  
  
Async = {  
  
  
  
  Operation: {  
  
  
  
    var callbackQueue = [];  
  
  
  
    this.result = undefined;  
  
  
  
    this.state = "waiting";  
  
  
  
    this.completed = false;  
  
  
  
  }  
  
  
  
} 
 
 
 

addCallback方法

接下来，我们要实现addCallback方法，它的工作职责很简单，就是把回调函数放到callbackQueue中。此外，如果此时completed为true，说明异步操作已经yield过了，则立即调用此回调。

 
 
 

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

我们假设yield方法会把callbackQueue中的回调函数逐个取出来然后调用，因此如果compeleted为true，则使用已有的result再调用一次yield就可以了，这样yield自然会调用这次添加到callbackQueue的回调函数。

至于最后的return this;，只是为了方便jQuery风格的链式写法，可以通过点号分隔连续添加多个回调函数来实现JavaScript异步调用：

 
 
 

  
  
  
asyncOperation(argument)  
  
  
  
  .addCallback(firstCallback)  
  
  
  
  .addCallback(secondCallback); 
 
 
 

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异步调用框架，完整的代码如下：

 
 
 

  
  
  
Async = {  
  
  
  
    Operation: function() {  
  
  
  
        var callbackQueue = [];  
  
  
  
        this.result = undefined;  
  
  
  
        this.state = "running";  
  
  
  
        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;  
  
  
  
        };  
  
  
  
    }  
  
  
  
}; 
 
 
 

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

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

 
 
 

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

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

网站题目：JavaScript异步调用框架的代码实现
分享路径：http://www.36103.cn/qtweb/news48/16148.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联