Promise的構(gòu)造函數(shù)接收一個參數(shù)电爹，是函數(shù)蔫仙，并且傳入兩個參數(shù)：resolve，reject丐箩，分別表示異步操作執(zhí)行成功后的回調(diào)函數(shù)和異步操作執(zhí)行失敗后的回調(diào)函數(shù)摇邦。
1.模擬同步加載，比如兩個ajax請求屎勘，需求是ajax1執(zhí)行完拿到數(shù)據(jù)后才能執(zhí)行ajax2施籍，這里我就用setTimeout來表示ajax。
一般的處理方式是
var ajax1=setTimeout(()=>{
? ? console.log(?"ajax1回調(diào)了,發(fā)起ajax2請求 ");
? ??var ajax2=setTimeout(()=>{?
? ? ? ? ? ? console.log( "ajax2回調(diào)了概漱，發(fā)起ajax3請求" );
? ???????????var ajax3=setTimeout(()=>{
?????????? ? ? ? ? ??????console.log( "ajax3的回調(diào)執(zhí)行了" );
? ? ? ? ? ? ? ?},1000)
??????},1000)
},1000)
用promise實現(xiàn)
new Promise(( resolve,reject )=>{
????????setTimeout(()=>{
????????????????console.log( "ajax1回調(diào)了,開始調(diào)用ajax2的請求函數(shù) ");
? ? ? ? ? ? ? ? ?resolve("哈哈哈哈我是ajax1請求回來的數(shù)據(jù)");
????????})
})
.then((res)=>{
????return new Promise(( resolve,reject )=>{
????????????console.log("ajax1傳過來的參數(shù)="+res);
????????????setTimeout(()=>{
????????????????????console.log( "ajax2回調(diào)了,開始調(diào)用ajax3的請求函數(shù) ");
? ? ? ? ? ? ? ? ? ? ?resolve("哈哈哈哈我是ajax2請求回來的數(shù)據(jù)");
????????????})
????})
})
.then((res)=>{
????????return new Promise(( resolve,reject )=>{
????????????console.log("ajax2傳過來的參數(shù)="+res);
? ? ? ? ? ? ?setTimeout(()=>{
????????????????????console.log( "ajax3回調(diào)了");
????????????????????reject("ajax3回調(diào)拿到的參數(shù)為null丑慎，我要報異常");
????????????????})
????})??
})
.catch((err)=>{
????console.log(err);
});
代碼多的話兩種方式的可讀性就很明顯了。
2.并行加載瓤摧，可以讓幾個函數(shù)“并行”異步加載竿裂，一起回調(diào)。
Promise.all 接收一個 promise對象的數(shù)組作為參數(shù)照弥，當這個數(shù)組里的所有promise對象全部變?yōu)閞esolve或reject狀態(tài)的時候腻异，它才會去調(diào)用 .then 方法。
var fun1=(res)=>{
????return new Promise((resolve,reject)=>{
????????????setTimeout(()=>{
????????????????//這個請求用了1秒
????????????????resolve(res);
????????????},1000)
????});
}
var fun2=(res)=>{
????????return new Promise((resolve,reject)=>{
????????????????setTimeout(()=>{
????????????????????//這個請求用了3秒
????????????????????resolve(res);
????????????????},3000)
????????});
}
var obj={ name:"promise"};
var obj1={ name:"all"}
Promise.all([fun1(obj),fun2(obj1)]).then((res)=>{
????//3秒后
????console.log(res);
????//[{"name":"promise"},{"name":"all"}]
????//返回的是包含所有函數(shù)返回值的數(shù)組
}).catch((err)=>{
????console.log(err);
})
Promise.all和Promise.race使用方式完全一樣产喉，區(qū)別在于all是數(shù)組中所有函數(shù)都執(zhí)行了resolve方法才回調(diào)捂掰，race則是第一個執(zhí)行了resolve方法就回調(diào)，這個就不上代碼了曾沈，只是回調(diào)有區(qū)別这嚣。
