1. What is promise used to solve?
Promise
Provides a unified solution for asynchronous programming, which is more reasonable and effective than traditional callbacks and events.Multiple nested callback functions, code is horizontal development, not vertical development, easy to mess up, inconvenient to manage, called "callback"
Hell"callback to hell or nightmares.
Promise was raised to solve this problem.It is not a new grammatical function, but a new way of writing that allows the callback function to be loaded horizontally instead of vertically.
Second, the basic understanding of promise
Promise is a constructor with familiar methods such as all, reject, resolve, and then, catch on its prototype.
Promise new comes out with the then, catch method.
Three states of Promise: Pending in progress / Resolved succeeded / Rejected failed
The function of Promise new() executes immediately.
Promise is typically packaged in a function and run when needed.
Executing this function we get a Promise object.
var p = new Promise(function(resolve, reject){
//Do some asynchronous operations
setTimeout(function(){
console.log('Execution Complete'); //Print now
resolve('Any data');
}, 2000);
}); function runAsync(){
var p = new Promise(function(resolve, reject){
//Do some asynchronous operations
setTimeout(function(){
console.log('Execution Complete');
resolve('Any data');
}, 2000);
});
return p;
}
runAsync()Call the then method directly on the return of runAsync(), and then receive a parameter, which is a function, and get the parameter we passed when we called resolve in runAsync.Running this code will output Execution Complete after 2 seconds, followed by Any Data.
Three, the essence-chain call of promise
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;
}Call:
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});Execution results:
**
4. catch usage captures rejected state
**
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 random numbers
if(num<=5){
resolve(num);
}
else{
reject('The number is too big');
}
}, 2000);
});
return p;
}We know that the Promise object has a catch method in addition to the then method. What does it do?In fact, it specifies the reject callback, just like the second parameter of the reject, in this way:
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});Usage of all
Promise's all method provides the ability to perform asynchronous operations in parallel and to perform callbacks after all asynchronous operations have been executed
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);
});5. Use of race
The effect of all method is actually "who runs slowly and who is allowed to perform the callback". Then there is another method "who runs fast and who is allowed to perform the callback". This is the race method. This word originally means running.
This is a summary of ES6 promise knowledge
Reference resources:http://www.cnblogs.com/lvdabao/p/es6-promise-1.html
On ES6 Native Promise:http://blog.csdn.net/sinat_17775997/article/details/60581125
ES6 Notes - Promise Mode:http://blog.csdn.net/sinat_17775997/article/details/60581125