JavaScript异步调用框架的jQuery风格链式调用

开发 前端
本文描述JavaScript异步调用框架的链式调用。简单的异步调用框架顺序执行的异步函数需要用嵌套的方式来声明。但在现实开发中,要按顺序执行一系列的同步异步操作又是很常见的。这就需要设计一种新的操作方式来优化代码可读性。

我们已经实现了一个简单的JavaScript异步调用框架,然而还有一些美中不足,那就是顺序执行的异步函数需要用嵌套的方式来声明。

现实开发中,要按顺序执行一系列的同步异步操作又是很常见的。还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息。这就是多个需要顺序执行的异步请求。

为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅。

传统做法

大多数程序员都能够很好的理解顺序执行的代码,例如这样子的:

  1. var firstResult = firstOperation(initialArgument);  
  2. var secondResult = secondOperation(firstResult);  
  3. var finalResult = thirdOperation(secondResult);  
  4. alert(finalResult); 

其中先执行的函数为后执行的函数提供所需的数据。然而使用我们的JavaScript异步调用框架后,同样的逻辑必须变成这样子:

  1. firstAsyncOperation(initialArgument).addCallback(function(firstResult) {  
  2.   secondAsyncOperation(firstResult).addCallback(function(secondResult) {  
  3.     thirdAsyncOperation(secondResult).addCallback(function(finalResult) {    
  4.       alert(finalResult);  
  5.     });  
  6.   });  
  7. }); 

链式写法

我认为上面的代码实在是太不美观了,并且希望能够改造为jQuery风格的链式写法。为此,我们先构造一个用例:

  1. Async.go(initialArgument)  
  2.   .next(firstAsyncOperation)  
  3.   .next(secondAsyncOperation)  
  4.   .next(thirdAsyncOperation)  
  5.   .next(function(finalResult) { alert(finalResult); }) 

在这个用例当中,我们在go传入初始化数据,然后每一个next后面传入一个数据处理函数,这些处理函数按顺序对数据进行处理。

同步并存

上面的用例调用到的全部都是异步函数,不过我们***能够兼容同步函数,让使用者无需关心函数的具体实现,也能使用这项功能。为此我们再写一个这样的用例:

  1. Async.go(0)  
  2.   .next(function(i) { alert(i); return i + 1; })  
  3.   .next(function(i) {  
  4.     alert(i);  
  5.     var operation = new Async.Operation();  
  6.     setTimeout(function() { operation.yield(i + 1); }, 1000);  
  7.     return operation;  
  8.   })  
  9.   .next(function(i) { alert(i); return i + 1; })  
  10.   .next(function(i) { alert(i); return i; }); 

在上述用例中,我们期待能够看到0, 1, 2, 3的提示信息序列,并且1和2之间间隔为1000毫秒。

异步本质

一个链式调用,本质上也是一个异步调用,所以它返回的也是一个Operation实例。这个实例自然也有result、state和completed这几个字段,并且当整个链式调用完成时,result等于***一个调用返回的结果,而completed自然是等于true。

我们可以扩展一下上一个用例,得到如下用例代码:

  1. var chainOperation = Async.go(0)  
  2.   .next(function(i) { alert(i); return i + 1; })  
  3.   .next(function(i) {  
  4.     alert(i);  
  5.     var operation = new Async.Operation();  
  6.     setTimeout(function() { operation.yield(i + 1); }, 1000);  
  7.     return operation;  
  8.   })  
  9.   .next(function(i) { alert(i); return i + 1; })  
  10.   .next(function(i) { alert(i); return i; });  
  11.  
  12. setTiemout(function() { alert(chainOperation.result; }, 2000);  

把链式调用的返回保存下来,在链式调用完成时,它的result应该与***一个操作的返回一致。在上述用例中,也就是3。

调用时机

尽管我们提供了一种链式调用方式,但是用户不一定会按照这种固定的方式来调用,所以我们仍然要考虑兼容用户的各种可能用法,例如说异步地用next往调用链添加操作:

  1. var chainOperation = Async.go(0);  
  2. chainOperation.next(function(i) { alert(i); return i + 1; });  
  3. setTimeout(function() {  
  4.   chainOperation.next(function(i) {  
  5.     alert(i);  
  6.     var operation = new Async.Operation();  
  7.     setTimeout(function() { operation.yield(i + 1); }, 2000);  
  8.     return operation;  
  9.   })  
  10. }, 1000);  
  11. setTimeout(function() {  
  12.   chainOperation.next(function(i) { alert(i); return i + 1; });  
  13. }, 2000); 

在这个用例当中,用户每隔1000毫秒添加一个操作,而其中第二个操作耗时2000毫秒。也就是说,添加第三个操作时第二个操作还没返回。作为一个健壮的框架,必须要能兼容这样的使用方式。

此外我们还要考虑,用户可能想要先构造调用链,然后再执行调用链。这时候用户就会先使用next方法添加操作,再使用go方法执行。

  1. var chainOperation = Async  
  2.   .chain(function(i) { alert(i); return i + 1; })  
  3.   .next(function(i) {  
  4.     alert(i);  
  5.     var operation = new Async.Operation();  
  6.     setTimeout(function() { operation.yield(i + 1); }, 2000);  
  7.     return operation;  
  8.   })  
  9.   .go(0)  
  10. setTimeout(function() {  
  11.   chainOperation.next(function(i) { alert(i); return i + 1; })  
  12. }, 1000); 

在上述用例中,用户通过chain和next添加了头同步操作和异步操作各一个,然后用go执行调用链,在调用链执行完毕之前又用next异步追加了一个操作。一个健壮的框架,在这样的用例当中应该能够如同用户所期望的那样提示0, 1, 2。

小结

针对链式调用的需求,我们设计了如此多的用例,包括各种奇怪的JavaScript异步调用方式。具体实现方法,将在下文中讲述。

【编辑推荐】

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

2009-07-01 14:37:14

JavaScript异

2009-07-01 13:58:00

JavaScript异

2009-07-01 14:23:46

JavaScript异

2009-07-01 14:05:23

JavaScript异

2011-03-02 08:57:22

jQueryJavaScript

2009-10-20 16:48:30

C#委托

2009-12-21 14:10:26

WCF异步调用

2009-11-09 10:50:30

WCF异步调用

2021-03-29 09:26:44

SpringBoot异步调用@Async

2009-11-06 15:54:15

WCF异步调用

2009-08-21 11:02:55

C#异步调用

2022-07-01 08:14:28

Dubbo异步代码

2010-02-22 13:28:05

WCF异步调用

2009-08-21 11:24:16

C#异步调用

2009-12-07 14:35:42

WCF异步调用

2012-10-29 10:59:27

Windows 8

2009-12-07 14:26:47

WCF异步调用

2010-01-11 17:24:19

VB.NET异步调用

2022-09-27 12:01:56

Spring异步调用方式

2009-11-09 15:49:01

WCF异步调用
点赞
收藏

51CTO技术栈公众号