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

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

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

同步

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

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

異步

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

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

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

異步任務分為：宏任務微任務

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

事件執(zhí)行順序

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

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

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

4.按先進先出的順序取出執(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);
    });