The Promise in JS

ES6 Promise First pull out for a walkThe concept of complexity first, we first simple rough promise to use, there is an intuitive feeling. So the first question is, what is promise? is a class? Object? Array? Function? Don't guess, just print it out and see, Console.dir (Promise), it's so simple and rude. Such a look to understand, promise is a constructor, his body has all, reject, resolve these familiar methods, the prototype has then, catch and so on the same familiar method. So there must be a then and catch method for the promise new object, yes. Let's play a new game.

var p = new Promise (function (resolve, reject) {    //Do some asynchronous operation    SetTimeout (function () {        console.log (' execution complete ');        Resolve (' whatever data ');    }, 2000);});

The promise constructor takes a parameter, is a function, and passes in two parameters: Resolve,reject, which represents the callback function after the successful execution of the asynchronous operation and the failed execution of the asynchronous operation. In fact, the "success" and "failure" to describe is not accurate, according to the standard, resolve is to promise the status of Fullfiled,reject is to promise the status of rejected. But at the beginning we can understand this first, and then scrutiny the concept later. In the above code, we performed an asynchronous operation, that is, after settimeout,2 seconds, the output "done" and called the Resolve method. Running the code will output "execution complete" in 2 seconds. Attention! I just new an object, and did not call it, we passed in the function has been executed, this is a need to pay attention to a detail. So when we use promise, we usually wrap it in a function, and run the function when needed, such as:

function RunAsync () {    var p = new Promise (function (resolve, reject) {        //Do some asynchronous operation        SetTimeout (function () {            console.log (' execution complete ');            Resolve (' random data ');        }    );    return p;            } RunAsync ()

At this point you should have two questions: 1. Is packing such a function for yarn use? 2.resolve (' random data '); This is dry hair? We're going to keep speaking. At the end of our packaged function, we return the Promise object, that is, we have a promise object that executes the function. Remember the Promise object has then, catch method? This is where the power is, look at the following code:

RunAsync (). Then (function (data) {    console.log (data);    You can use the data passed to do some other operations    //...});

Call the then method directly on the return of Runasync (), then receive a parameter, be a function, and get the arguments that we call resolve simultaneous in Runasync. Running this code will output "execution complete" in 2 seconds, followed by the output "whatever data". At this point you should be able to understand that the function inside then is the same as our usual callback function, which can be executed after the completion of the Runasync asynchronous task execution. This is the role of promise, simply speaking, is able to separate the original callback, after the asynchronous operation is finished, the callback function is executed in a chained way. You might be dismissive, so what's the promise? I'm going to wrap the callback function and pass it to Runasync, like this:

function RunAsync (callback) {    setTimeout (function () {        console.log (' execution complete ');        Callback (' random data ');    }, 2000);} RunAsync (function (data) {    console.log (data);});

The effect is the same, but also hard to do with promise. So the question is, what should I do with multiple levels of callbacks? What if callback is also an asynchronous operation and needs a corresponding callback function after execution? You can never define a callback2, and then pass it on to callback. The advantage of promise is that you can continue to write the Promise object and return it in the then method, and then continue to invoke then to perform the callback operation. use of chained operationsSo, from the surface, promise just can simplify the writing of the layer callback, but in essence, the essence of Promise is "state", with the maintenance state, the way to transfer state to make the callback function can be called in time, it is more simple and flexible than the transfer callback function. So the correct scenario for using promise is this:

RUNASYNC1 (). Then (function (data) {    console.log (data);    return RunAsync2 ();}). Then (the function (data) {    console.log (data);    return runAsync3 ();}). Then (function (data) {    console.log (data);});

This enables the output of the contents of each asynchronous callback in sequence, every two seconds, and the data passed to resolve in RunAsync2, which can be obtained in the next and then method. The results of the operation are as follows: Guess RunAsync1, RUNASYNC2, runAsync3 How are the three functions defined? Yes, that's the way it is (the code is longer, please expand yourself):

function RunAsync1 () {    var p = new Promise (function (resolve, reject) {        //Do some asynchronous operation        SetTimeout (function () {            Console.log (' Asynchronous Task 1 execution complete ');            Resolve (' Whatever data 1 ');        };    });    return p;            } function RunAsync2 () {    var p = new Promise (function (resolve, reject) {        //Do some asynchronous operation        SetTimeout (function () {            Console.log (' Asynchronous Task 2 execution complete ');            Resolve (' Whatever data 2 ');        })    ;    return p;            } function runAsync3 () {    var p = new Promise (function (resolve, reject) {        //Do some asynchronous operation        SetTimeout (function () {            Console.log (' Asynchronous Task 3 execution complete ');            Resolve (' Whatever data 3 ');        })    ;    return p;            }

In the then method, you can also return the data directly instead of the Promise object, then you can receive the data in the subsequent then, for example, we modify the above code to:

RUNASYNC1 (). Then (function (data) {    console.log (data);    return RunAsync2 ();}). Then (the function (data) {    console.log (data);    Return ' directly returns data ';  Return data}). Then (function (data) {    console.log (data);});

Then the output becomes this: the use of RejectHere, you should have a basic understanding of what "promise is". So let's take a look at ES6 's promise. We use the resolve, but also useless reject it, what is it to do? In fact, our previous example is only a "successful" callback, there is no "failure" situation, reject's role is to put the promise state as rejected, so that we can capture in then, and then execute "failure" callback. Look at the code below. Press CTRL + C to copy the code<textarea></textarea>Press CTRL + C to copy the Code GetNumber function is used to asynchronously get a number, 2 seconds after the completion of execution, if the number is less than or equal to 5, we think is "successful", call resolve modify the state of promise. Otherwise we think it is "failed", call reject and pass a parameter as the reason for the failure. Run GetNumber and then pass two parameters, then the method can accept two parameters, the first one corresponding to the resolve callback, the second corresponding to the reject callback. So we were able to get the data they sent. Run this code multiple times and you will randomly get the following two results: or use of CatchWe know that the Promise object has a catch method in addition to the then method, what does it do? In fact, it is the same as the second parameter of then, used to specify the callback of the reject, the usage is this:

GetNumber (). Then (function (data) {    Console.log (' resolved ');    Console.log (data);}). catch (function (reason) {    console.log (' rejected ');    Console.log (reason);});

The effect is the same as the second parameter written in then. However, it has another function: When executing the resolve callback (that is, the first argument in the above then), if the exception is thrown (the code is wrong), then the error will not die JS, but into the catch method. Take a look at the following code:

GetNumber (). Then (function (data) {    Console.log (' resolved ');    Console.log (data);    Console.log (Somedata); Somedata undefined}). catch (function (reason) {    console.log (' rejected ');    Console.log (reason);});

In Resolve's callback, we Console.log (Somedata), and somedata this variable is undefined. If we do not have to promise, the code runs here directly in the console error, not down run. But here, you get the result: it goes into the catch method, and the wrong reason is passed to the reason parameter. Even the wrong code will not get an error, which has the same function as our Try/catch statement. usage of allThe all method of promise provides the ability to perform asynchronous operations in parallel and executes callbacks after all asynchronous operations have been performed. We still use the three functions defined above, RUNASYNC1, RunAsync2, runAsync3, to see the following example:

Promise.all ([RunAsync1 (), RunAsync2 (), runAsync3 ()]). Then (function (results) {    console.log (results);});

Executes with Promise.all, all receives an array parameter, and the value in it eventually returns the Promise object. In this way, three asynchronous operations are executed in parallel until they are all executed before they come into the then. So, where did the data returned by three asynchronous operations go? It's all in then, and all the results of all the asynchronous operations are put into an array and passed to then, which is the results above. So the output from the above code is: With all, you can execute multiple asynchronous operations in parallel, and it's cool to handle all the return data in a callback? There is a scene is very suitable for this, some of the game material more than the application, open the Web page, pre-load the need to use a variety of resource slices, flash and various static files. Once all is loaded, we will initialize the page again. the use of raceThe effect of the all method is actually "who runs slowly, who is the quasi-callback", then there is another way "who runs fast, with whom to execute the callback", this is the race method, this word is meant to race. Race usage As with all, we change the delay of the above runAsync1 to 1 seconds to see:

Promise.race ([RunAsync1 (), RunAsync2 (), runAsync3 ()]). Then (function (results) {    console.log (results);});

These three asynchronous operations are also executed in parallel. As a result you should be able to guess that after 1 seconds the RUNASYNC1 has been executed, and then the inside is executed. The result is this: Did you guess right? Not exactly, is it. When the callback in then is executed, RUNASYNC2 () and runAsync3 () do not stop and still execute. Then after 1 seconds, they output the sign of their end. What's the use of this race? The use of the scene is still a lot, for example, we can use race to set the timeout time for an asynchronous request, and after the timeout, the corresponding operation, the code is as follows:

Request a picture resource function requestimg () {    var p = new Promise (function (resolve, reject) {        var img = new Image ();        Img.onload = function () {            resolve (IMG);        }        IMG.SRC = ' xxxxxx ';    });    return p;} The delay function, which is used to give the request a timer functions timeout () {    var p = new Promise (function (resolve, reject) {        setTimeout (function () {            reject (' Picture request timed out ');        }    );    return p;} Promise.race ([Requestimg (), timeout ()]). Then (function (results) {    console.log (results);}). catch (function (reason) {    console.log (reason);});

The REQUESTIMG function asynchronously requests a picture, I write the address as "xxxxxx", so it must not be successfully requested. The timeout function is an asynchronous operation with a delay of 5 seconds. We put the two functions returned to the Promise object into the race, so they will race, if the picture request is successful within 5 seconds, then go through the then method to perform the normal process. If the 5-second picture has not been successfully returned, then timeout will win, then go to catch and quote "Picture Request timed out" information. The results of the operation are as follows: Reproduced from: Lv Tai Leopard

The Promise in JS