promise筆記

promise
一，有三個狀態
pedding（正在進行），fulfilled（執行成功），rejected（執行失敗）
二，promise內含一個異步操做，異步操做控制promise狀態改變
1，pedding到fulfilled
2，pedding到rejected
三，promise有兩個參數，而且都是函數
1，resolve
當異步操做執行成功以後，執行resolve
而且修改promise狀態爲fulfilled
2，reject
當異步操做執行失敗以後，執行reject
而且修改promise狀態爲reject

使用：
一，聲明一個promise
1，字面量聲明
var runAsync = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('執行完成');
resolve('隨便什麼數據');
}, 2000);
});
2，函數式聲明
function runAsync(){
var p = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('執行完成');
resolve('隨便什麼數據');
}, 2000);
});
return p;
}
3，返回值式聲明
function runAsync(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
二，指定resolve回調函數
1，兩步操做
runAsync.then(function(data){
console.log(data);
});
2，多步操做
function runAsync1(){
var p = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('異步任務1執行完成');
resolve('隨便什麼數據1');
}, 1000);
});
return p;
}
function runAsync2(){
var p = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('異步任務2執行完成');
resolve('隨便什麼數據2');
}, 2000);
});
return p;
}
function runAsync3(){
var p = new Promise(function(resolve, reject){
//作一些異步操做
setTimeout(function(){
console.log('異步任務3執行完成');
resolve('隨便什麼數據3');
}, 2000);
});
return p;
}
runAsync1()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
return '直接返回數據'; //這裏直接返回數據
});

先執行runAsync1，成功後執行runAsync2，成功後執行runAsync3，同步執行三個異步操做

三，reject的用法
promise中有異步操做函數，在異步操做內部對數據進行判斷，而後決定執行reject仍是resolve
四，catch的用法
能夠指定reject函數，和then的第二個參數同樣做用，可是當then的第一個回調函數參數執行失敗會直接進入catch並傳入失敗緣由，不會直接報錯。通常用catch做爲失敗緣由輸出，而不是then的第二個參數。
五，promise的all用法
做用是並行執行異步操做，異步操做所有執行完畢纔開始執行回調函數
用法:
Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
console.log(results);//此處將上面三個異步操做的結果做爲一個數組輸出做爲結果
});
使用場景：用於資源的加載，全部的都加載完後，咱們再進行頁面的初始化。

六，race的用法
all是所有的異步操做執行完畢，纔開始執行then。race是第一個異步操做執行完畢就立馬執行then的回調函數，如果第一個異步操做沒有跑贏後面的異步操做，那麼會進入catch執行。
例如：
//請求某個圖片資源
function requestImg(){
var p = new Promise(function(resolve, reject){
var img = new Image();
img.onload = function(){
resolve(img);
}
img.src = 'xxxxxx';
});
return p;
}

//延時函數，用於給請求計時
function timeout(){
var p = new Promise(function(resolve, reject){
setTimeout(function(){
reject('圖片請求超時');
}, 5000);
});
return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
console.log(results);
})
.catch(function(reason){
console.log(reason);
});

聲明兩個promise異步操做，如果請求圖片快於超時的先執行完，那麼執行then，反之執行catch

 promise在聲明後會當即執行

 

詳細：http://www.javashuo.com/article/p-ynqqhjop-by.html