Take the $.Deferred object in jQuery as an example to explain how promise objects handle asynchronous issues_jquery

Promises is an abstraction that makes the asynchronous behavior of code more elegant. It is likely to be the next programming paradigm of JavaScript. A Promise represents the result of the task, regardless of whether the task is completed or not.

Some modern browsers already provide native Promise objects, which follow the Promise/A standard. In jQuery1.5, $.Deferred (which can be converted into a promise object) is provided. Many well-known frameworks also provide promise objects. The promise object is already a very important pattern in JavaScript. The elegance it shows in solving asynchronous problems is exactly what JavaScript needs. Let's take the $.Deferred object in jQuery as an example to see how the promise object handles asynchronous issues. Regarding the $.Deferred object, you can check it out on the jQuery official website, so I won’t go into details here.

1. Encapsulating asynchronous operations

First, let’s take loading images as an example and look at the following code:

In the above code, I encapsulate the image loading operations, delegate them to $.Deferred, and finally generate a promise to return. Using this method is cleaner and clearer than using externally exposed callbacks. Another more important reason for doing this is the connection of promises.

2. Promise connection

Let’s take the code for loading the image above as an example to see how to connect promises. Look at the following code:

The promise object provides the then method, which accepts two callbacks: onResolve and onReject. By returning promise in the callback, the connection between promises can be completed. In this way, asynchronous operations can be executed serially.

At the same time, jQuery also provides another connection method, see the code:

jQuery provides the $.when function, which can accept n promise objects as parameters. It connects the execution results of promises together. Using this approach, multiple asynchronous operations can be executed in parallel.

3. The End

The code here takes loading images as an example. The same approach can be applied to other asynchronous operations. For example, $.ajax and $.fn.animate in jQuery, calling them returns promise. On the node side, some asynchronous operations (reading databases, reading files, etc.) can also be encapsulated into promises. Then implement the merge operation on multiple promises to execute them serially or in parallel.

Attachment: deferred object

In addition to being used to convert promise objects, deferred itself is also a very useful object. In addition to providing methods and properties like the promise object, it also has the notify function and the progress function. These two functions are of great use when implementing progress bars and waterfall flows.

When implementing the progress bar, the resolve and done functions can be used to define the triggering timing and triggering logic when the progress bar is read to 100%. The notify and progress functions can be used to define the triggering timing and triggering time of the progress bar during reading. Trigger logic. The reject and fail functions can be used to define the trigger timing and trigger logic when progress reading fails.

When implementing waterfall flow, the resolve and done functions can be used to define the triggering timing and triggering logic when all data has been loaded into the page. The notify and progress functions can be used to define the triggering timing and triggering time for waterfall flow to read the next page. Trigger logic.