Promise
- Promise的作用续崖，promise如何進(jìn)行多個(gè)數(shù)據(jù)的請(qǐng)求
Promise對(duì)象代表一個(gè)異步操作敲街，有三種狀態(tài)：
Pending（進(jìn)行中）；
Resolved（已完成严望，又稱 Fulfilled）多艇；
Rejected（已失敗）像吻。Promise 就是用同步的方式寫異步的代碼峻黍，用來解決回調(diào)地獄
then()方法
then 方法就是把原來的回調(diào)寫法分離出來复隆，在異步操作執(zhí)行完后，用鏈?zhǔn)秸{(diào)用的方式執(zhí)行回調(diào)函數(shù)姆涩。
而 Promise 的優(yōu)勢(shì)就在于這個(gè)鏈?zhǔn)秸{(diào)用挽拂。我們可以在 then 方法中繼續(xù)寫 Promise 對(duì)象并返回，然后繼續(xù)調(diào)用 then 來進(jìn)行回調(diào)操作骨饿。
解決傳參的回調(diào)地獄
new Promise((resolve,reject)=>{
// 開始請(qǐng)求數(shù)據(jù)
// ajax() //偽代碼
// 當(dāng)數(shù)據(jù)回來之后調(diào)用 resolve(res)
// 當(dāng)請(qǐng)求失敗之后調(diào)用 reject(err)
})
// api http://www.baidu.com ----> 商品ID A001 ---- > 商品的詳情 http://google.com? goodsid=A001
axios.get("http://www.baidu.com").then(res=>{
return new Promise((resvole,reject)=>{
let goodsid = res.goodsId
axios.get('http://google.com?goodsid=A001').then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}).then(res=>{
res.xxx
return new Promise((resolve,reject)=>{
axios.get("xxxx?aa=xxx",).then(res=>{
resvole(res)
}).catch(err=>{
reject(res)
})
})
}).then()
命名三個(gè)函數(shù) p1 p2 p3運(yùn)用promise方法
setTimeout() 方法用于在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式亏栈。
var p1,p2,p3
p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("foo");
}, 3000);
})
p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject("oof");
}, 500);
})
p3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("ofo");
}, 1000);
})
Promise.all可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例。
同時(shí)宏赘，成功和失敗的返回值是不同的绒北，成功的時(shí)候返回的是一個(gè)結(jié)果數(shù)組，而失敗的時(shí)候則返回最先被reject失敗狀態(tài)的值察署。
Promise.all([p1,p2,p3]).then(res=>{
console.log(res)
})
誰先完成就調(diào)用誰
Promise.race([p1,p2,p3]).then(res=>{
console.log(res)
console.log(111111)
}).catch(err=>{
console.log(err)
console.log(222222)
})
async/await
有一種特殊的語法可以更舒適地與promise協(xié)同工作闷游，它叫做async/await
函數(shù)前面的async意味著這個(gè)函數(shù)總是返回一個(gè)promise，如果代碼中有return 語句箕母，JavaScript會(huì)自動(dòng)把返回的這個(gè)value值包裝成promise的resolved值储藐。
async function f() {
return 1
}
所以，async確保了函數(shù)返回一個(gè)promise嘶是，即使其中包含非promise钙勃；
還有另一個(gè)關(guān)鍵詞await，只能在async函數(shù)里使用聂喇。
關(guān)鍵詞await可以讓JavaScript進(jìn)行等待辖源，直到一個(gè)promise執(zhí)行并返回它的結(jié)果，JavaScript才會(huì)繼續(xù)往下執(zhí)行希太。
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('done!'), 1000)
})
let result = await promise // 直到promise返回一個(gè)resolve值（*）
alert(result) // 'done!'
}
f()
函數(shù)執(zhí)行到（*）行會(huì)‘暫涂巳模’，當(dāng)promise處理完成后重新恢復(fù)運(yùn)行誊辉， resolve的值成了最終的result矾湃，所以上面的代碼會(huì)在1s后輸出'done!'
強(qiáng)調(diào)一下：await字面上使得JavaScript等待，直到promise處理完成堕澄，
然后將結(jié)果繼續(xù)下去邀跃。這并不會(huì)花費(fèi)任何的cpu資源，因?yàn)橐婺軌蛲瑫r(shí)做其他工作：執(zhí)行其他腳本蛙紫，處理事件等等拍屑。
這比promise更加容易閱讀和書寫。
