vue中同步方法的實現(xiàn)

更新時間：2023年05月16日 10:46:42 作者：masonqiang

這篇文章主要介紹了vue中同步方法的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue同步方法實現(xiàn)

有三種實現(xiàn)方式

1、axios本身屬于Promise

利用函數(shù)式的then獲取請求返回結(jié)果，也是最常用的，如下：

?request({
? ? ? ? url: '/test/XXX/XXXX',
? ? ? ? method: 'post',
? ? ? ? data: param
? ? ? }).then(ret => {
? ? ? ? if (ret.code === RESULT_CODE.SUCCESS) {
? ? ? ? ? this.$message.success('保存成功')
? ? ? ? }
? ? ? })

此處request對象是對axios做了一層封裝，不用在意。此種方式的缺陷是：只能用于請求返回后只有簡單操作的情形。

如果返回后的操作比較多，代碼就會顯得臃腫，可讀性差，還有一種情況，即該請求被調(diào)用的情況，由于axios沒有配置為同步請求的配置項，因此無法直接將上述代碼封裝后直接調(diào)用，因此，引申出第二種方法：

2、async結(jié)合await

// api.js文件
// test1方法作為被調(diào)用方，被test1方法調(diào)用
export async function test1 (param) {
? ? // 返回一個Promise對象，真正需要返回給調(diào)用方的數(shù)據(jù)，放在resolve中
? ? return new Promise(resolve => {
? ? ? ? // request對象是對axios的封裝，不用在意
? ? ? ? request({
? ? ? ? ? ? url: '/emr/order/deleteOrder',
? ? ? ? ? ? method: 'post',
? ? ? ? ? ? data: order
? ? ? ? }).then(ret => {
? ? ? ? ? ?resolve(ret.data)
? ? ? ? }
? ? ? })
? ? })
}

// VUE文件
methods: {
? ? // test2作為調(diào)用方調(diào)用test1方法
? ? async test2 (param) {
? ? ? ? const data = await test1(param)
? ? }
}

3、引入jquery

此處就不寫了，這種方式感覺挺沒追求的。

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