JavaScript asynchronous call framework case design

As mentioned in the previous article, we need to design a JavaScript asynchronous call framework. It is best to unify the interfaces for Synchronous asynchronous calls, and the specific call sequence has nothing to do with the implementation method. Now we will design such a framework case.

Transfer callback

The first thing we need to consider is how to pass the callback entry. In the most traditional XHR calls, the callback function will be passed to the asynchronous function as the last parameter:

 
 

  
  
function asyncOperation(argument, callback) 
 
 

When there are quite a few parameters, we can put the parameters in a JSON file. In this way, the parameters are similar to the named parameters and can be passed through the parameter names, if the parameter is not passed, the default value is used. This is a popular practice since Prototype:

 
 

  
  
function asyncOperation(argument, options) 
 
 

However, either of these methods has a disadvantage: when changing a synchronous function to an asynchronous function or a synchronous asynchronous hybrid function, you must explicitly modify the function signature, add one or more) parameters at the end. This is an issue that needs to be considered for JavaScript asynchronous calls.

It is too common for us to introduce asynchronous functions at the underlying layer of the Call Stack. Therefore, it is too costly to change the signature of a large number of upper-layer call functions, so we still want to consider a method that does not need to modify the function signature.

Here I have referred to the IAsyncResult DESIGN OF. NET Framework, and concentrated all information related to asynchronous operations on an object, thus avoiding modification to the function signature. Here, we assume that the call prototype of an asynchronous function is like this:

 
 

  
  
function asyncOperation(argument) {  
  
  
  operation = new Async.Operation();  
  
  
  setTimeout(function() { operation.yield("hello world"); }, 1000);  
  
  
  return operation;  
  
  
} 
 
 

In this Code, we return an Operation object to pass the callback function in the future. At the same time, we use setTimeout to simulate asynchronous return results, and the specific return method is the yield method.

Next, we also need to design a method to pass the callback function. Since we cannot overload the + = Operator like C #, we can only use the function to pass the callback function:

 
 

  
  
var operation = asyncOperation(argument);  
  
  
operation.addCallback(function(result) { alert(result); }); 
 
 

This design in C # is not secure, because asynchronous operations may be completed before callback is added. However, writing in JavaScript is safe, because JavaScript is single-threaded, and the synchronization addCallback of asyncOperation must be executed first. asynchronous yield in asyncOperation must be executed later.

Call Sequence

Someone may ask, if the user uses synchronous method to call yield, is the execution order different depending on yield implementation? Yes, but yeild is implemented in the Framework at one time. We only need to make it asynchronous, so that even synchronous calls to it will not affect the execution sequence:

 
 

  
  
function psudoAsyncOperation(argument) {  
  
  
  operation = new Async.Operation();  
  
  
  operation.yield("hello world");  
  
  
  return operation;  
  
  
}  
  
  
var operation = asyncOperation(argument);  
  
  
operation.addCallback(function(result) { alert(result); }); 
 
 

Even if the code is written like this, we can make sure that addCallback runs ahead of yield's actual logic.

Post-Event Callback

Sometimes, framework users may write the code of yield first and addCallback later. At this time, I think it is necessary to ensure that the callback function added in addCallback will be triggered immediately. Because the user adds this callback function, it means that he expects to notify the callback function when the asynchronous operation has a result, which is irrelevant to whether the asynchronous operation is completed when the callback function is added. To this end, we add another use case:

 
 

  
  
function psudoAsyncOperation(argument) {  
  
  
  operation = new Async.Operation();  
  
  
  operation.yield("hello world");  
  
  
  return operation;  
  
  
}  
  
  
var operation = asyncOperation(argument);  
  
  
setTimeout(function() {  
  
  
  operation.addCallback(function(result) { alert(result); });  
  
  
}, 1000); 
 
 

Summary

Here, we have designed an asynchronous Operation object named Async. Operation. The method of Asynchronous JavaScript call will operate on this object.

1. Description of the JavaScript asynchronous call framework
2. How to use Javascript + VML to implement process designer
3. Common JavaScript Regular Expression Verification
4. 24 tips for beginners of JavaScript
5. Cookie details in JavaScript