目錄

• 的同步呼叫和非同步呼叫
• Promise實現非同步呼叫
• async /await方法實現同步呼叫
• Vue同步和非同步的問題
• 基本語法
• 例項

Vue的同步呼叫和非同步呼叫

Promise實現非同步呼叫

非同步呼叫，增加a、b兩個方法，並在mounted中呼叫。 觀察客戶端，並沒有按照方法執行的順序輸出，使用Promise實現了非同步呼叫。

觀察客戶端，並沒有按照方法執行的順序輸出，使用Promise實現了非同步呼叫。

async /await方法實現同步呼叫

使用async 和 await配合promise也可以實現同步呼叫，nuxt.中使用async/await實現同步呼叫效果

觀察服務端控制檯發現是按照a，b的呼叫順序輸出1，2，使用async/await實現了同步呼叫。

Vue同步和非同步的問題

之所以想到寫這個問題是因為在工作中遇到一些相關的問題，最後用ES7的async-awaitwww.cppcns.com 來解決這個問題。話不多述 ，進正題。

基本語法

async functionbasicDemo() {
let result = await Math.random();
console.log(result);
}
basicDemo();
// 0.6484863241051226//Promise {[[PromiseStatus]]: "resolved",[[PromiseValue]]: undefined}

上述程式碼就是async-await的基本使用形式。有兩個陌生的關鍵字async、await，同時函式執行結果似乎返回了一個promise物件。

• async

async functiondemo01(){
return 123;
}
demo01().then(val=> {
console.log(val);// 123});

若 async 定義的函式有返回值，return 123;相當於Promise.resolve(123),沒有宣告式的 return則相當於執行了Promise.resolve();

• await

await 可以理解為是 async wait 的簡寫。await 必須出現在 async 函式內部，不能單獨使用。

functionnotAsyncFunc(){
await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 後面可以跟任何的JS 表示式。雖然說 await 可以等很多型別的東西，但是它最主要的意圖是用來等待 Promise 物件的狀態被 resolved。如果await的是 promise物件會造成非同步函式停止執行並且等待promise 的解決,如果等的是正常的表示式則立即執行。

functionsleep(second){
return new Promise((resolve,reject) => {
setTimeout(()=> {
resolve(' enough sleep~');
},second);
})
}functionnormalFunc(){
console.log('normalFunc');
}async functionawaitDemo(){
await normalFunc();
console.log('something,~~');
let result = await sleep(2000);
console.log(result);// 兩秒之後會被打印出來}
awaitDemo()

希望通過上面的 demo，大家可以理解我上面的話。

例項

舉例說明啊，你有三個請求需要發生，第三個請求是依賴於第二個請求的解構第二個請求依賴於第一個請求的結果。若用 ES5實現會有3層的回撥，若用Promise 實現至少需要3個then。一個是程式碼橫向發展，另一個是縱向發展。今天指給出 async-await 的實現哈~

我們仍然使用 setTimeout 來模擬非同步請求

functionsleep(second,param){
return new Promise((resolve,reject) => {
setTimeout(()=> {
resolve(param);
},second);
})
}async functiontest(){
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();

錯誤處理

上述的程式碼好像給的都是resolve的情況，那麼reject的時候我們該如何處理呢？

functionsleep(second){
return new Promise((resolve,reject) => {
setTimeout(()=> {
reject('want to sleep~');
},second);
})
}async functionerrorDemo(){
let result = await sleep(1000);
console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~// 為了處理Promise.reject 的情況我們應該將程式碼塊用 try catch 包裹一下async functionerrorDemoSuper(){
try {
let result = await sleep(1000);
console.log(result);
} catch (err) {
console.log(err);
}
}
errorDemoSuper();// want to sleep~

小心你的並行處理!!!

我這裡為啥加了三個感嘆號呢~，因為對於初學者來說一不小心就將 ajax 的併發請求發成了阻塞式同步的操作了客棧，我就真真切切的在工作中寫了這樣的程式碼。await 若等待的是 promise 就會停止下來。業務是這樣的，我有三個非同步請求需要傳送，相互沒有關聯，只是需要當請求都結束後將介面的 loading 清除掉即可。 剛學完 async await 開心啊，到處亂用~

functionsleep(second){
return new Promise((resolve,reject) => {
setTimeout(()=> {
resolve('request done! ' + Math.random());
},second);
})
}async functionbugDemo(){
await sleep(1000);
await sleep(1000);
await sleep(1000);
console.log('clear the loading~');
}
bugDemo();

loading 確實是等待請求都結束完才清除的。但是你認真的觀察下瀏覽器的 timeline 請求是一個結束後再發另一個的（若觀察效果請發真實的 ajax 請求）

那麼，正常的處理是怎樣的呢？

async functioncorrecwww.cppcns.comtDemo(){
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1,p程式設計客棧2,p3]);
console.log('clear the loading~');
}
correctDemo();// clear the loading~

以上。

好了，這些僅為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。