Vue中的同步調(diào)用和異步調(diào)用怎么實現(xiàn)

這篇“Vue中的同步調(diào)用和異步調(diào)用怎么實現(xiàn)”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中的同步調(diào)用和異步調(diào)用怎么實現(xiàn)”文章吧。

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

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

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

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

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

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

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

Vue同步和異步的問題

之所以想到寫這個問題是因為在工作中遇到一些相關(guān)的問題，最后用ES7的async-await 來解決這個問題。話不多述 ，進(jìn)正題。

基本語法

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

上述代碼就是async-await的基本使用形式。有兩個陌生的關(guān)鍵字async、await，同時函數(shù)執(zhí)行結(jié)果似乎返回了一個promise對象。

• async

async functiondemo01(){
    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)部，不能單獨使用。

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

await 后面可以跟任何的JS 表達(dá)式。雖然說 await 可以等很多類型的東西，但是它最主要的意圖是用來等待 Promise 對象的狀態(tài)被 resolved。如果await的是 promise對象會造成異步函數(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);// 兩秒之后會被打印出來}
awaitDemo()

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

實例

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

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

小心你的并行處理!!!

我這里為啥加了三個感嘆號呢~，因為對于初學(xué)者來說一不小心就將 ajax 的并發(fā)請求發(fā)成了阻塞式同步的操作了，我就真真切切的在工作中寫了這樣的代碼。await 若等待的是 promise 就會停止下來。業(yè)務(wù)是這樣的，我有三個異步請求需要發(fā)送，相互沒有關(guān)聯(lián)，只是需要當(dāng)請求都結(jié)束后將界面的 loading 清除掉即可。 剛學(xué)完 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 確實是等待請求都結(jié)束完才清除的。但是你認(rèn)真的觀察下瀏覽器的 timeline 請求是一個結(jié)束后再發(fā)另一個的（若觀察效果請發(fā)真實的 ajax 請求）

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

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~

以上就是關(guān)于“Vue中的同步調(diào)用和異步調(diào)用怎么實現(xiàn)”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。