promise Cheat Sheet

catch usage

We know that in addition to then subject Promise method, there is a catch method, it is what to do with it? In fact, it's the same as the second argument then used to specify a callback reject the usage is this:
Copy the code
getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});
Copy the code

Effect and then write in the second parameter inside the same. But it also has another effect: When a callback resolve (that is, the first parameter of the above then), if an exception is thrown (the code wrong), it does not complain stuck js, but will the process proceeds to catch. Consider the following code:

Copy the code
getNumber()
.then(function(data){
    console.log('resolved');
    console.log(data);
    console.log(somedata); //此处的somedata未定义
})
.catch(function(reason){
    console.log('rejected');
    console.log(reason);
});
Copy the code
In the callback resolve, we console.log (somedata); and somedata this variable is not defined. If we do not Promise, to run the code directly in the console error here, you do not run down. But here, you get this result:
 
That went in to catch a method to go, but the cause of the error spread to the reason parameter. Even if there is an error code is not being given, which is our try / catch statement has the same functionality.

all usage

Promise of all parallel method provides the ability to perform asynchronous operations, and only perform a callback operation is performed after all asynchronous. We still use the above definition good runAsync1, runAsync2, runAsync3 these three functions, look at the following example:
Copy the code
Copy the code
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
Copy the code
Copy the code
Promise.all performed with, a receiving array All parameter values ​​which are considered the final return Promise objects. Thus, three parallel execution of asynchronous operations, which are performed until after only then proceeds to the inside. So, three asynchronous operation returns data where to go out? Are then inside it, all the results of all asynchronous operations will then pass into an array, that is, the above results. The output result of the above code is:
 
With all, you can run multiple concurrent asynchronous operations and handle all the data is returned in a callback, is not it cool? There is a scene very suitable for this, and some more games like material applications, open web pages, pre-loaded with all kinds of resources need to use such images, flash and various static files. After all are loaded, we then initialize the page.
 

race usage

The effect of all methods is actually "who ran slower to execute the callback who prevail," then there is another method relative "who run fast, in order to perform the callback who prevail." This method is the race, the word the race was originally meant. Usage race and all, we put delay above runAsync1 changed to one second look:
Copy the code
Copy the code
Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});
Copy the code
Copy the code
The three asynchronous operations are also performed in parallel. You can guess the result, after one second runAsync1 has been executed over, this time on the inside then executed. The result is this:
 
You guessed it? Incomplete, is not it. When then started inside the callback, runAsync2 () and runAsync3 () does not stop, then still execute. So after another one second, the sign of their output ends.
 
The race what use is it? Still many usage scenarios, such as race we can use an asynchronous request to set the timeout, and performs a corresponding operation after the timeout, as follows:
Copy the code
Copy the code
// request a picture resource 
function requestImg () { 
    var P = new new Promise (function (Resolve, Reject) { 
        var IMG = new new Image (); 
        img.onload = function () { 
            Resolve (IMG); 
        } 
        img.src = 'xxxxxx'; 
    }); 
    return P; 
} 

// delay function for a request timing 
function timeout () { 
    var P = new new Promise (function (Resolve, Reject) { 
        the setTimeout (function () { 
            Reject ( ' image request timeout '); 
        }, 5000); 
    }); 
    return P; 
} 

Promise 
.race ([requestImg (), timeout ()]) 
.then (function (Results) { 
    the console.log (Results); 
})
.catch(function(reason){
    console.log(reason);
});
Copy the code
Copy the code
requestImg function asynchronous request a picture, I write address is "xxxxxx", it certainly can not be successful request to. function is a timeout of 5 seconds delay asynchronous operation. We return Promise objects of these two functions into the race, then They will race, if the picture within 5 seconds the request succeeds, then pass into the method, the normal procedure. If the picture has not been successful return five seconds, then the timeout will outperform, then enter the catch, report the information "image request timed out" of. Results are as follows:
 

Guess you like

Origin www.cnblogs.com/guors/p/10973638.html