Vue中的同步和異步使用詳解

更新時間：2025年08月26日 14:23:08 作者：咸魚妹妹

這篇文章主要介紹了Vue中的同步和異步使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

同步

在主線程上排隊之行的任務(wù)，只有在最前面的任務(wù)執(zhí)行完成之后，才之行后面的任務(wù)。

（生活中的例子話糙理不怪：銀行排隊，只有一個窗口的時候，A業(yè)務(wù)辦理完在接著辦理B）

異步

是指不進(jìn)入主線程,而是進(jìn)入了“任務(wù)隊列”的任務(wù),只有“任務(wù)隊列”通知主線程,某個異步任務(wù)可執(zhí)行了，該任務(wù)才會進(jìn)入主線程執(zhí)行。

（生活中的例子話糙理不怪：多個窗口，可以同時辦理業(yè)務(wù)，互不影響）

同步的優(yōu)點是：同步是按照順序一個一個來，不會亂掉，更不會出現(xiàn)上面代碼沒有執(zhí)行完就執(zhí)行下面的代碼，
缺點：是解析的速度沒有異步的快；
異步的優(yōu)點是：異步是接取一個任務(wù)，直接給后臺，在接下一個任務(wù)，一直一直這樣，誰的先讀取完先執(zhí)行誰的，
缺點：沒有順序，誰先讀取完先執(zhí)行誰的，會出現(xiàn)上面的代碼還沒出來下面的就已經(jīng)出來了，會報錯；

異步任務(wù)分為：宏任務(wù) 微任務(wù)

宏任務(wù)：包含整體代碼script / setTimeout / setInterval
微任務(wù)：Promise.then(非new Promise) / process.nextTick(node中)

事件執(zhí)行順序

1.先執(zhí)行宏任務(wù)，在執(zhí)行微任務(wù)

2.微任務(wù)根據(jù)先進(jìn)先出的順序執(zhí)行

3.微任務(wù)清空后在執(zhí)行宏任務(wù)

4.按先進(jìn)先出的順序取出執(zhí)行

Promise 實現(xiàn)異步調(diào)用
asnyc/await 實現(xiàn)同步調(diào)用

   // 項目中使用的事例：Vue接口請求異步變同步
    created() {
        this.initData();
    }
    methods: {
        async initData() {
            let res = await getList(this.params);
            if (res.message === "成功") {
                this.resultList = res.data;;
            }
        }
    }

// 異步請求同步的方法
    handleClick() {
        return new Promise((resolve,reject) => {   //resolve 成功 ,reject 失敗
            getRequest().then(res => {
                //操作1
                resolve();
            }).catch(error =>{
                console.log(error)
                reject()
            })
        })
    },
    test(){
        Promise.all([this.handleClick()]).then(res=>{
            //操作2
        })
    }

    // promise的操作
    const promise = new Promise(function(resolve, reject){
        if(一步操作成功){
            resolve(value);
        }else{
            reject(error);
        }
    })

    // 異步操作
    new Promise((resolve, reject) => {
        resolve(1);
        console.log(2);
    }).then(r => {
        console.log(r);
    });
    // 2

    // 寫法一
    const promise = new Promise(function(resolve, reject) {
        try {
            throw new Error('test');
        } catch(e) {
            reject(e);
        }
    });
    promise.catch(function(error) {
        console.log(error);
    });

    // 寫法二
    const promise = new Promise(function(resolve, reject) {
        reject(new Error('test'));
    });
    promise.catch(function(error) {
        console.log(error);
    });