JQuery-style chained call of JavaScript asynchronous call framework

We have implemented a simple JavaScript asynchronous call framework, but there are still some shortcomings, that is, the asynchronous functions executed in sequence need to be declared in nested mode.

In actual development, it is very common to execute a series of synchronous asynchronous operations in sequence. In the Baidu Hi web page, we need to obtain the contact list asynchronously, and then obtain the specific information of each contact asynchronously, which is obtained by page, send the names of 10 contacts each time and retrieve the corresponding information. These are multiple asynchronous requests that require sequential execution.

To this end, we need to design a new operation method to optimize code readability, so that the sequential asynchronous operation code looks as elegant as the traditional sequential synchronization operation code.

Traditional practices

Most programmers can understand the code executed in sequence, for example:

 
 

  
  
var firstResult = firstOperation(initialArgument);  
  
  
var secondResult = secondOperation(firstResult);  
  
  
var finalResult = thirdOperation(secondResult);  
  
  
alert(finalResult); 
 
 

The function that is executed first provides the required data for the function that is executed later. However, after using our JavaScript asynchronous call framework, the same logic must be like this:

 
 

  
  
firstAsyncOperation(initialArgument).addCallback(function(firstResult) {  
  
  
  secondAsyncOperation(firstResult).addCallback(function(secondResult) {  
  
  
    thirdAsyncOperation(secondResult).addCallback(function(finalResult) {    
  
  
      alert(finalResult);  
  
  
    });  
  
  
  });  
  
  
}); 
 
 

Chain writing

I think the above Code is too ugly and I hope to transform it into a jQuery-style chained writing method. To solve this problem, we first construct a use case:

 
 

  
  
Async.go(initialArgument)  
  
  
  .next(firstAsyncOperation)  
  
  
  .next(secondAsyncOperation)  
  
  
  .next(thirdAsyncOperation)  
  
  
  .next(function(finalResult) { alert(finalResult); }) 
 
 

In this case, we pass in the initialization data in go, and then input a data processing function after each next. These processing functions process the data in order.

Synchronization and coexistence

All the above examples call asynchronous functions, but we 'd better be compatible with synchronous functions, so that users can use this function without having to worry about the specific implementation of the function. For this reason, we will write another example:

 
 

  
  
Async.go(0)  
  
  
  .next(function(i) { alert(i); return i + 1; })  
  
  
  .next(function(i) {  
  
  
    alert(i);  
  
  
    var operation = new Async.Operation();  
  
  
    setTimeout(function() { operation.yield(i + 1); }, 1000);  
  
  
    return operation;  
  
  
  })  
  
  
  .next(function(i) { alert(i); return i + 1; })  
  
  
  .next(function(i) { alert(i); return i; }); 
 
 

In the above example, we expect to see a series of prompts for 0, 1, 2, 3, and the interval between 1 and 2 is 1000 milliseconds.

Asynchronous nature

A chain call is essentially an asynchronous call, so it returns an Operation instance. This instance naturally has the fields "result", "state", and "completed". When the chain call is complete, "result" equals the result returned by the last call, and "completed" equals "true.

We can extend the previous use case to get the following code:

 
 

  
  
var chainOperation = Async.go(0)  
  
  
  .next(function(i) { alert(i); return i + 1; })  
  
  
  .next(function(i) {  
  
  
    alert(i);  
  
  
    var operation = new Async.Operation();  
  
  
    setTimeout(function() { operation.yield(i + 1); }, 1000);  
  
  
    return operation;  
  
  
  })  
  
  
  .next(function(i) { alert(i); return i + 1; })  
  
  
  .next(function(i) { alert(i); return i; });  
  
  
 
  
  
setTiemout(function() { alert(chainOperation.result; }, 2000);  
 
 

Save the returned result of the chained call. When the chained call is completed, the result should be consistent with the returned result of the last operation. In the preceding example, 3 is used.

Call time

Although we provide a chained call method, users may not necessarily follow this fixed method. Therefore, we still need to consider compatibility with various possible user usage, for example, add an operation to the call chain asynchronously using next:

 
 

  
  
var chainOperation = Async.go(0);  
  
  
chainOperation.next(function(i) { alert(i); return i + 1; });  
  
  
setTimeout(function() {  
  
  
  chainOperation.next(function(i) {  
  
  
    alert(i);  
  
  
    var operation = new Async.Operation();  
  
  
    setTimeout(function() { operation.yield(i + 1); }, 2000);  
  
  
    return operation;  
  
  
  })  
  
  
}, 1000);  
  
  
setTimeout(function() {  
  
  
  chainOperation.next(function(i) { alert(i); return i + 1; });  
  
  
}, 2000); 
 
 

In this example, the user adds an operation every 1000 milliseconds, and the second operation takes 2000 milliseconds. That is to say, when the third operation is added, the second operation has not been returned. As a robust framework, you must be compatible with this method.

In addition, you may want to construct a call chain before executing the call chain. At this time, the user will first use the next method to add operations, and then use the go method to execute.

 
 

  
  
var chainOperation = Async  
  
  
  .chain(function(i) { alert(i); return i + 1; })  
  
  
  .next(function(i) {  
  
  
    alert(i);  
  
  
    var operation = new Async.Operation();  
  
  
    setTimeout(function() { operation.yield(i + 1); }, 2000);  
  
  
    return operation;  
  
  
  })  
  
  
  .go(0)  
  
  
setTimeout(function() {  
  
  
  chainOperation.next(function(i) { alert(i); return i + 1; })  
  
  
}, 1000); 
 
 

In the preceding example, the user adds one header synchronization operation and one Asynchronous Operation Through chain and next, and then uses go to execute the call chain, before the call chain is executed, an operation is asynchronously appended with next. A robust framework should prompt 0, 1, 2 as the user expects in such cases.

Summary

We have designed so many use cases for chained calls, including various strange JavaScript asynchronous call methods. The specific implementation method is described below.

1. Code Implementation of the JavaScript asynchronous call framework
2. JavaScript asynchronous call framework case design
3. Description of the JavaScript asynchronous call framework
4. How to use Javascript + VML to implement process designer
5. Common JavaScript Regular Expression Verification