一酗宋、async-await和Promise的關(guān)系
async-await是promise和generator的語法糖。只是為了讓我們書寫代碼時(shí)更加流暢品姓，當(dāng)然也增強(qiáng)了代碼的可讀性寝并。簡單來說：async-await 是建立在 promise機(jī)制之上的，并不能取代其地位腹备。
二衬潦、基本語法
async function basicDemo() {
let result = await Math.random();
console.log(result);
}
basicDemo();
// 0.6484863241051226
//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}
上述代碼就是async-await的基本使用形式。有兩個(gè)陌生的關(guān)鍵字async植酥、await镀岛，同時(shí)函數(shù)執(zhí)行結(jié)果似乎返回了一個(gè)promise對象。
async
async用來表示函數(shù)是異步的，定義的函數(shù)會返回一個(gè)promise對象哎媚，可以使用then方法添加回調(diào)函數(shù)。
async function demo01() {
return 123;
}
demo01().then(val => {
console.log(val);// 123
});
若 async 定義的函數(shù)有返回值喊儡，return 123;
相當(dāng)于Promise.resolve(123),沒有聲明式的 return則相當(dāng)于執(zhí)行了Promise.resolve();
await
await 可以理解為是 async wait 的簡寫拨与。await 必須出現(xiàn)在 async 函數(shù)內(nèi)部，不能單獨(dú)使用艾猜。
function notAsyncFunc() {
await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier
await 后面可以跟任何的JS 表達(dá)式买喧。雖然說 await 可以等很多類型的東西，但是它最主要的意圖是用來等待 Promise 對象的狀態(tài)被 resolved匆赃。如果await的是 promise對象會造成異步函數(shù)停止執(zhí)行并且等待 promise 的解決,如果等的是正常的表達(dá)式則立即執(zhí)行淤毛。
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(' enough sleep~');
}, second);
})
}
function normalFunc() {
console.log('normalFunc');
}
async function awaitDemo() {
await normalFunc();
console.log('something, ~~');
let result = await sleep(2000);
console.log(result);// 兩秒之后會被打印出來
}
awaitDemo();
// normalFunc
// VM4036:13 something, ~~
// VM4036:15 enough sleep~
二、實(shí)例
舉例說明啊算柳，你有三個(gè)請求需要發(fā)生低淡，第三個(gè)請求是依賴于第二個(gè)請求的解構(gòu)第二個(gè)請求依賴于第一個(gè)請求的結(jié)果。若用 ES5實(shí)現(xiàn)會有3層的回調(diào)瞬项，若用Promise 實(shí)現(xiàn)至少需要3個(gè)then蔗蹋。一個(gè)是代碼橫向發(fā)展，另一個(gè)是縱向發(fā)展囱淋。今天指給出 async-await 的實(shí)現(xiàn)哈~
//我們?nèi)匀皇褂?setTimeout 來模擬異步請求
function sleep(second, param) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(param);
}, second);
})
}
async function test() {
let result1 = await sleep(2000, 'req01');
let result2 = await sleep(1000, 'req02' + result1);
let result3 = await sleep(500, 'req03' + result2);
console.log(`
${result3}
${result2}
${result1}
`);
}
test();
//req03req02req01
//req02req01
//req01
三猪杭、錯(cuò)誤處理
上述的代碼好像給的都是resolve的情況，那么reject的時(shí)候我們該如何處理呢妥衣？
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('want to sleep~');
}, second);
})
}
async function errorDemo() {
let result = await sleep(1000);
console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~
// 為了處理Promise.reject 的情況我們應(yīng)該將代碼塊用 try catch 包裹一下
async function errorDemoSuper() {
try {
let result = await sleep(1000);
console.log(result);
} catch (err) {
console.log(err);
}
}
errorDemoSuper();// want to sleep~
// 有了 try catch 之后我們就能夠拿到 Promise.reject 回來的數(shù)據(jù)了皂吮。
四、小心你的并行處理!
對于初學(xué)者來說一不小心就將 ajax 的并發(fā)請求發(fā)成了阻塞式同步的操作了税手，我就真真切切的在工作中寫了這樣的代碼蜂筹。await 若等待的是 promise 就會停止下來。業(yè)務(wù)是這樣的芦倒，我有三個(gè)異步請求需要發(fā)送狂票，相互沒有關(guān)聯(lián)，只是需要當(dāng)請求都結(jié)束后將界面的 loading 清除掉即可熙暴。
剛學(xué)完 async await 開心啊闺属，到處亂用~
function sleep(second) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request done! ' + Math.random());
}, second);
})
}
async function bugDemo() {
await sleep(1000);
await sleep(1000);
await sleep(1000);
console.log('clear the loading~');
}
bugDemo();
loading 確實(shí)是等待請求都結(jié)束完才清除的。但是你認(rèn)真的觀察下瀏覽器的 timeline 請求是一個(gè)結(jié)束后再發(fā)另一個(gè)的（若觀察效果請發(fā)真實(shí)的 ajax 請求）
那么周霉，正常的處理是怎樣的呢掂器？
async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1, p2, p3]);
console.log('clear the loading~');
}
correctDemo();// clear the loading~
恩， 完美俱箱」停看吧~ async-await并不能取代promise.
附上最近寫的一個(gè)mpvue的demo請求：
