es6 Promise

One 、Promise produce

Must have been in touch with Node Everyone knows ,Node In order to asynchronous (Async) Known for callback , Its asynchrony improves the execution efficiency of the program , But it also reduces the readability of the program . If we have several asynchronous operations , And the latter operation needs the data returned by the previous operation to execute , According to Node The general law of execution , To achieve orderly asynchronous operations , It is usually nested one layer after another .

To solve this problem ,ES6 Put forward Promise The implementation of the .

Two 、Promise Explain the usage

Promise It's a constructor , I have all、reject、resolve These familiar methods , Prototype has then、catch And so on .

It would be new One

var p = new Promise(function(resolve, reject){
    // Do some asynchronous operations 
    setTimeout(function(){
        console.log(' Execution completed ');
        resolve(' Any data ');
    }, 2000);
});

Promise Constructor of takes a parameter , Is the function , And two parameters are passed in ：resolve,reject, It represents the callback function after the asynchronous operation succeeds and the callback function after the asynchronous operation fails . Actually, it's used here “ success ” and “ Failure ” It's not accurate to describe , According to the standard ,resolve Yes, it will Promise The status of is set to fullfiled,reject Yes, it will Promise The status of is set to rejected. But in the beginning, we can understand that , I'll go into the concept later .

 

In the code above , We performed an asynchronous operation , That is to say setTimeout,2 Seconds later , Output “ Execution completed ”, And call resolve Method .

 

Run code , Will be in 2 Second output “ Execution completed ”. Be careful ！ I'm just new An object , It's not called , The function we passed in has been executed , This is a detail that needs attention . So we use Promise It's usually wrapped in a function , Run this function when needed , Such as ： 

function runAsync(){
    var p = new Promise(function(resolve, reject){
        // Do some asynchronous operations 
        setTimeout(function(){
            console.log(' Execution completed ');
            resolve(' Any data ');
        }, 2000);
    });
    return p;            
}
runAsync()

You should have two questions at this time ：1. Packaging such a function has wool ？2.resolve(' Any data '); It's dry ？

 

Let's continue . At the end of our wrapped function , Meeting return Out Promise object , in other words , To execute this function, we get a Promise object . Remember Promise There are then、catch Methods! ？ That's what's powerful , Look at the code below ：

runAsync().then(function(data){
    console.log(data);
    // You can use the data to do other operations later 
    //......
});

stay runAsync() Called directly on the return of then Method ,then Receive a parameter , Is the function , And we'll get it runAsync Call in resolve Parameters of time transmission . Run this code , Will be in 2 Second output “ Execution completed ”, Followed by output “ Any data ”.

 

It's time for you to understand , original then The function in it has the same meaning as our normal callback function , In the runAsync This asynchronous task is executed after execution . This is it. Promise The role of the , simply , It can separate the original callback writing method , After the asynchronous operation is completed , Executing callback function by chain call .

 

You may be dismissive , It's so awesome Promise That's it ？ I'll encapsulate the callback function , to runAsync Isn't it the same when it's passed in , Just like this. ：

function runAsync(callback){
    setTimeout(function(){
        console.log(' Execution completed ');
        callback(' Any data ');
    }, 2000);
}

runAsync(function(data){
    console.log(data);
});

The effect is the same , It's still hard to use. Promise why . So here comes the question , What to do if there are multiple callbacks ？ If callback It's also an asynchronous operation , And the corresponding callback function is required after the execution , What to do ？ You can't define another one callback2, And then to callback Let's go in. . and Promise The advantage is that , Can be in then Method relay renewal Promise Object and return , Then continue to call then For callback operation .

 

Usage of chain operation

therefore , On the face of it ,Promise It's just a way to simplify layers of callbacks , In essence ,Promise The essence of it is “ state ”, Maintenance status 、 The way to pass the state enables the callback function to call in time , It is more than pass. callback Function should be simple 、 Flexible . So use Promise The right scenario for ：

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

This allows you to order , Output the contents of each asynchronous callback every two seconds , stay runAsync2 Pass to resolve The data of , Can be in the next then Method . The operation results are as follows ：

Guess runAsync1、runAsync2、runAsync3 How these three functions are defined ？ you 're right , That's what it looks like

function runAsync1(){
    var p = new Promise(function(resolve, reject){
        // Do some asynchronous operations 
        setTimeout(function(){
            console.log(' Asynchronous task 1 Execution completed ');
            resolve(' Any data 1');
        }, 1000);
    });
    return p;            
}
function runAsync2(){
    var p = new Promise(function(resolve, reject){
        // Do some asynchronous operations 
        setTimeout(function(){
            console.log(' Asynchronous task 2 Execution completed ');
            resolve(' Any data 2');
        }, 2000);
    });
    return p;            
}
function runAsync3(){
    var p = new Promise(function(resolve, reject){
        // Do some asynchronous operations 
        setTimeout(function(){
            console.log(' Asynchronous task 3 Execution completed ');
            resolve(' Any data 3');
        }, 2000);
    });
    return p;            
}

stay then In the method , You can also directly return Data, not Promise object , In the rear then Data can be received in , Let's change the above code to this ：

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return ' Direct return data ';  // Data is directly returned here 
})
.then(function(data){
    console.log(data);
});

So that's what the output is like ：

reject Usage of

Come here , You should be right. “Promise What is it ” With a basic understanding . So let's take a look ES6 Of Promise What are the other functions . We ran out of it resolve, Not yet. reject Well , What does it do ？ in fact , In our previous examples, only “ Successful implementation ” The callback , Not yet “ Failure ” The situation of ,reject The function of Promise The status of is set to rejected, So we are then You can capture it in , And then execute “ Failure ” Situation callback . Look at the code below .

function getNumber(){
    var p = new Promise(function(resolve, reject){
        // Do some asynchronous operations 
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); // Generate 1-10 The random number 
            if(num<=5){
                resolve(num);
            }
            else{
                reject(' The number is too big ');
            }
        }, 2000);
    });
    return p;            
}

getNumber()
.then(
    function(data){
        console.log('resolved');
        console.log(data);
    }, 
    function(reason, data){
        console.log('rejected');
        console.log(reason);
    }
);

getNumber Function to get a number asynchronously ,2 Execution completed in seconds , If the number is less than or equal to 5, We think it's “ success ” 了 , call resolve modify Promise The state of . Otherwise, we think it is “ Failure ” 了 , call reject And pass a parameter , As a cause of failure .

 

function getNumber And in then Two parameters passed in ,then Method can take two parameters , First correspondence resolve The callback , Second correspondence reject The callback . So we can get their data separately . Run this code multiple times , You will get the following two results at random ：

perhaps

catch Usage of

We know Promise In addition to objects then Method , One more catch Method , What is it for ？ In fact, it and then The second parameter is the same , Used to specify reject The callback , The usage is this ：

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

Effect and write in then In the second parameter of . But it has another function ： In execution resolve The callback （ That's up there then First parameter in ） when , If an exception is thrown （ Code error ）, So it doesn't report the wrong card js, It's going to be here catch In the method . Look at the code below ：

getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); // Here somedata Undefined 
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});

stay resolve In the callback , We console.log(somedata); and somedata This variable is undefined . If we don't Promise, When the code runs here, an error is reported directly on the console , Don't run down . But here , We'll get this result ：

 

That is to say, entering catch It's in the method , And spread the cause of the mistake reason Parameters in . Even if there is an error code, it will not report an error , It's about our try/catch Statement has the same function .

all Usage of

Promise Of all Methods provide the ability to perform asynchronous operations in parallel , And the callback is executed after all asynchronous operations have been executed . We still use the definition above runAsync1、runAsync2、runAsync3 These three functions , See the following example ：

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){ console.log(results); });

use Promise.all To execute ,all Receive an array parameter , All the values in it are finally returned Promise object . such , Parallel execution of three asynchronous operations , Wait until they're all done then Inside . that , Where are the data returned by the three asynchronous operations ？ All in then Inside? ,all The result of all asynchronous operations will be put into an array and passed to then, It's up there results. So the output of the above code is ：

 

With all, You can perform multiple asynchronous operations in parallel , And process all the return data in a callback , Isn't it cool ？ There's a scenario that's great for this , Some game materials are more widely used , When opening a web page , Preload various resources needed, such as pictures 、flash And various static files . When all is loaded , Let's initialize the page again .

 

race Usage of

all The effect of the method is actually 「 Who runs slowly , Who executes the callback 」, So there's another way to do that 「 Who runs fast , Who executes the callback 」, This is it. race Method , The word originally means race .race The usage and all equally , Let's put it up runAsync1 The delay of is changed to 1 In seconds ：

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 ,1 Seconds later runAsync1 It's done , here then What's in it is executed . It turns out like this ：

 

Are you right ？ Incomplete , Is that so? . stay then When the callback inside starts executing ,runAsync2() and runAsync3() It didn't stop , Do it again . So again 1 Seconds later , Output their end flag .

 

This race What's the use ？ There are many scenarios , For example, we can use race Set timeout for an asynchronous request , And execute corresponding operation after timeout , 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 time delay function , Used to time requests  function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject(' Picture request timeout '); }, 5000); }); return p; } Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });

requestImg The function asynchronously requests a picture , I write the address as "xxxxxx", So it must not be successful .timeout Function is a delay 5 Second asynchronous operation . Let's get these two back Promise Object's function into race, So they would race , If 5 Picture request succeeded in seconds , So many times then Method , Perform normal process . If 5 Second picture has not returned successfully , that timeout They won. , entering catch, Report “ Picture request timeout ” Information about . The operation results are as follows ：