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

开发 前端
本文提供了JavaScript异步调用框架的代码实现。我们将实现一个用于JavaScript异步调用的Async.Operation类,通过addCallback方法传递回调函数,并且通过yield方法返回回调结果。

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

类结构

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

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

addCallback方法

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

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

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

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

asyncOperation(argument)  
  .addCallback(firstCallback)  
  .addCallback(secondCallback); 
  • 1.
  • 2.
  • 3.

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;  

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

通过使用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;  
        };  
    }  
}; 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

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

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

firstAsyncOperation().addCallback(function() {  
  secondAsyncOperation().addCallback(function() {  
    thirdAsyncOperation().addCallback(function() {  
      finalSyncOperation();  
    });  
  });  
}); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

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

【编辑推荐】

  1. JavaScript异步调用框架用例设计
  2. JavaScript异步调用框架问题描述
  3. 浅谈如何用Javascript+VML实现流程设计器
  4. 常用的JavaScript验证正则表达式
  5. 给JavaScript初学者的24个小窍门
责任编辑:yangsai 来源: Cat in dotNET
相关推荐

2009-07-01 14:37:14

JavaScript异

2009-07-01 13:58:00

JavaScript异

2009-07-01 14:31:01

JavaScript异

2009-07-01 14:05:23

JavaScript异

2010-01-11 17:24:19

VB.NET异步调用

2009-10-20 16:48:30

C#委托

2009-08-21 11:24:16

C#异步调用

2022-09-27 12:01:56

Spring异步调用方式

2024-08-12 10:13:01

2010-02-25 09:13:34

WCF异步调用

2009-11-09 10:50:30

WCF异步调用

2009-12-21 14:10:26

WCF异步调用

2021-03-29 09:26:44

SpringBoot异步调用@Async

2010-03-01 14:01:50

WCF服务异步调用

2024-10-15 10:28:43

2024-07-31 15:57:41

2022-09-28 14:54:07

Spring注解方式线程池

2009-11-06 15:54:15

WCF异步调用

2022-07-01 08:14:28

Dubbo异步代码

2009-08-21 11:02:55

C#异步调用
点赞
收藏

51CTO技术栈公众号