Vue中的同步調(diào)用和異步調(diào)用方式

更新時(shí)間：2022年01月24日 11:39:27 作者：dustdawn

這篇文章主要介紹了Vue中的同步調(diào)用和異步調(diào)用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue的同步調(diào)用和異步調(diào)用

Promise實(shí)現(xiàn)異步調(diào)用

異步調(diào)用，增加a、b兩個(gè)方法，并在mounted中調(diào)用。觀(guān)察客戶(hù)端，并沒(méi)有按照方法執(zhí)行的順序輸出，使用Promise實(shí)現(xiàn)了異步調(diào)用。

在這里插入圖片描述

觀(guān)察客戶(hù)端，并沒(méi)有按照方法執(zhí)行的順序輸出，使用Promise實(shí)現(xiàn)了異步調(diào)用。

async /await方法實(shí)現(xiàn)同步調(diào)用

使用async 和 await配合promise也可以實(shí)現(xiàn)同步調(diào)用，nuxt.js中使用async/await實(shí)現(xiàn)同步調(diào)用效果

在這里插入圖片描述

觀(guān)察服務(wù)端控制臺(tái)發(fā)現(xiàn)是按照a，b的調(diào)用順序輸出1，2，使用async/await實(shí)現(xiàn)了同步調(diào)用。

Vue同步和異步的問(wèn)題

之所以想到寫(xiě)這個(gè)問(wèn)題是因?yàn)樵诠ぷ髦杏龅揭恍┫嚓P(guān)的問(wèn)題，最后用ES7的async-await 來(lái)解決這個(gè)問(wèn)題。話(huà)不多述，進(jìn)正題。

基本語(yǔ)法

async functionbasicDemo() {
????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對(duì)象。

async

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

若 async 定義的函數(shù)有返回值，return 123;相當(dāng)于Promise.resolve(123),沒(méi)有聲明式的 return則相當(dāng)于執(zhí)行了Promise.resolve();

await

await 可以理解為是 async wait 的簡(jiǎn)寫(xiě)。await 必須出現(xiàn)在 async 函數(shù)內(nèi)部，不能單獨(dú)使用。

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

await 后面可以跟任何的JS 表達(dá)式。雖然說(shuō) await 可以等很多類(lèi)型的東西，但是它最主要的意圖是用來(lái)等待 Promise 對(duì)象的狀態(tài)被 resolved。如果await的是 promise對(duì)象會(huì)造成異步函數(shù)停止執(zhí)行并且等待 promise 的解決,如果等的是正常的表達(dá)式則立即執(zhí)行。

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);// 兩秒之后會(huì)被打印出來(lái)}
awaitDemo()

希望通過(guò)上面的 demo，大家可以理解我上面的話(huà)。

實(shí)例

舉例說(shuō)明啊，你有三個(gè)請(qǐng)求需要發(fā)生，第三個(gè)請(qǐng)求是依賴(lài)于第二個(gè)請(qǐng)求的解構(gòu)第二個(gè)請(qǐng)求依賴(lài)于第一個(gè)請(qǐng)求的結(jié)果。若用 ES5實(shí)現(xiàn)會(huì)有3層的回調(diào)，若用Promise 實(shí)現(xiàn)至少需要3個(gè)then。一個(gè)是代碼橫向發(fā)展，另一個(gè)是縱向發(fā)展。今天指給出 async-await 的實(shí)現(xiàn)哈~

我們?nèi)匀皇褂?setTimeout 來(lái)模擬異步請(qǐng)求

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();

錯(cuò)誤處理

上述的代碼好像給的都是resolve的情況，那么reject的時(shí)候我們?cè)撊绾翁幚砟兀?/p>

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 的情況我們應(yīng)該將代碼塊用 try catch 包裹一下async functionerrorDemoSuper(){
????try {
????????let result = await sleep(1000);
????????console.log(result);
????} catch (err) {
????????console.log(err);
????}
}
errorDemoSuper();// want to sleep~

小心你的并行處理!!!

我這里為啥加了三個(gè)感嘆號(hào)呢~，因?yàn)閷?duì)于初學(xué)者來(lái)說(shuō)一不小心就將 ajax 的并發(fā)請(qǐng)求發(fā)成了阻塞式同步的操作了，我就真真切切的在工作中寫(xiě)了這樣的代碼。await 若等待的是 promise 就會(huì)停止下來(lái)。業(yè)務(wù)是這樣的，我有三個(gè)異步請(qǐng)求需要發(fā)送，相互沒(méi)有關(guān)聯(lián)，只是需要當(dāng)請(qǐng)求都結(jié)束后將界面的 loading 清除掉即可。剛學(xué)完 async await 開(kāi)心啊，到處亂用~

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 確實(shí)是等待請(qǐng)求都結(jié)束完才清除的。但是你認(rèn)真的觀(guān)察下瀏覽器的 timeline 請(qǐng)求是一個(gè)結(jié)束后再發(fā)另一個(gè)的（若觀(guān)察效果請(qǐng)發(fā)真實(shí)的 ajax 請(qǐng)求）

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

async functioncorrectDemo(){
????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~

以上。

好了，這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: