Code Implementation of the JavaScript asynchronous call framework

In the previous article, we mentioned the implementation of an Async. Operation class for JavaScript asynchronous calls. The callback function is passed through the addCallback method and the callback result is returned through the yield method. Now let's implement this class.

Class Structure

First, let's build a shelf and list all the variables that need to be used. We need an array to save the callback function list. A flag is required to indicate whether the asynchronous operation has been completed. You can also learn IAsyncResult and add a state, allow the implementer of asynchronous operations to expose the custom execution status. Add a variable to save the asynchronous operation result.

 
 

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

AddCallback Method

Next, we need to implement the addCallback method. Its job is to put the callback function into callbackQueue. In addition, if the value of completed is true, the asynchronous operation has passed yield, and the callback is called immediately.

 
 

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

We assume that the yield method will extract the callback functions in callbackQueue one by one and then call them. Therefore, if compeleted is set to true, you can use the existing result to call yield again, in this way, yield will naturally call the callback function added to callbackQueue this time.

As for the final return this;, just to facilitate jQuery-style chained writing, multiple callback functions can be added consecutively using dot-number separation to implement JavaScript asynchronous calling:

 
 

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

Yield Method

Finally, we need to implement the yield method. It needs to extract the callback functions in callbackQueue one by one, and then call them again, and ensure that this operation is asynchronous.

 
 

  
  
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;  
  
  
} 
 
 

By using setTimeout, we ensure that the actual yield operations are performed asynchronously. Then, we update the user-passed yield results and related statuses to the object attributes, and finally traverse callbackQueue to call all the callback functions.

Summary

In this way, a simple JavaScript asynchronous call framework is ready. The complete code is as follows:

 
 

  
  
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;  
  
  
        };  
  
  
    }  
  
  
}; 
 
 

This framework can well solve the coexistence of synchronous and asynchronous operations in the call stack. Assume that all functions return Async. operation, framework users can use a unified mode to write code and process function return, without having to worry about whether the function actually returns synchronously or asynchronously.

The nested addCallback method can be used to write multiple asynchronous functions in a serial call. However, as the number of nested layers increases, the code will become more and more unattractive:

 
 

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

Can we change the nested form to jQuery-style chained writing? This is the question to be considered next.

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