Use promise mode to simplify the asynchronous callback of JavaScript

The interaction of Web pages is becoming more and more complex, and the asynchronous operation of JavaScript is more and more. such as the common Ajax request, need to respond when the request completes, the request is usually asynchronous, the request in the process of the user can do other operations, will not block the page, this asynchronous interaction effect is very friendly to the user. But for developers, it's very unfriendly to deal with this kind of operation. An asynchronous request completes an operation that must be predefined in a callback function, and the function must be called when the request completes. This non-linear asynchronous programming method can make the developer very uncomfortable, but also brings many inconvenience, increases the code coupling degree and the complexity, the code organization also can be very not graceful, greatly reduces the code maintainability. The situation is more complex, if an operation to wait until the completion of more than one asynchronous Ajax request, there will be a callback function nesting situation, if you need to nest several layers, then you can only ask for more blessings.

Let's take a look at the common asynchronous function below.

var showmsg = function () {

settimeout (function () {

Alert (' Hello ');

}, 5000);

};

This is usually done if you want to add a callback to the function.

var showmsg = function (callback) {

settimeout (function () {

Alert (' Hello ');

Add callback Here

Callback ();

}, 5000);

};

If you are using the Easy.js Promise, the method of adding a callback will be much more elegant, if you need to encapsulate the original function into a Promise instance.

var showmsg = function () {

Constructing Promise Instance

var promise = new E.promise ();

settimeout (function () {

Alert (' Hello ');

Change the state of promise

Promise.resolve (' done ');

}, 5000);

Return Promise Instance

return promise;

};

Encapsulate a common function into a promise instance, there are 3 key steps, the first step is to construct a promise instance inside the function, the second step is to complete the deployment function to change the promise state is completed, and the third step is to return the promise instance. Each promise instance has 3 states, pending (incomplete), resolved (completed, successful), rejected (rejected, failed). Let's look at how to add a callback below.

ShowMsg (). Then (function (str) {

Callback added here it comes.

Callback (str);

}）;

This completely separates the callback function from the original asynchronous function, and looks a lot more elegant from the code organization. Resolve accepts a parameter that can be easily implemented to transfer data to a callback that is added using the then method.

For Ajax requests, Easy.js directly encapsulates the Ajax method as a Promise object, and you can add the then method directly to the callback.

E.ajax ({

URL: ' test1.php ',

Type: ' Get '

}）

Then (function () {

To add a successful callback for a request

}, function () {

Add callback with request failed

}）;

The then method accepts 2 functions as arguments, the first function is a completed callback, and the second is a failed callback.

What if there are multiple Ajax requests mentioned above? Then it is necessary to use the method. This method can accept multiple promise instances as parameters.

var requests = E.when (E.ajax ({

URL: ' test1.php ',

Type: ' Get '

}), E.ajax ({

URL: ' test2.php ',

Type: ' Get '

}））;

Requests.then (function (arg1, arg2) {

Console.log (' success: ' + arg1[0] + arg2[0]);

}, function (Arg1, arg2) {

Console.log (' failure: ' + arg1 + arg2);

}）;

When the method is to save multiple promise instances into an array, wait until all promise instances of the array are completed to perform the completed callback, and if one instance is a rejected state, the rejected callback is executed immediately.

Promise mode is one of the COMMONJS specifications. Many of the mainstream JavaScript libraries have implementations, such as JQuery and Dojo, that have Deferred to implement these functions. It's still going to spit it out. JQuery Deferred, put aside its internal use, this should be the lowest user usage of a module, which has a certain relationship with its more complex use.

If you want to delve into the easy.js promise source code, you can view the link here.

Article Source: Night Rain with knife blog