目錄

• vue同步方法實(shí)現(xiàn)
• 有三種實(shí)現(xiàn)方式
• vue中的同步和異步問題
• 同步
• 異步
• 總結(jié)

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

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

1、axios本身屬于Promise

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

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

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

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

2、async結(jié)合await

// api.js文件
// test1方法作為被調(diào)用方，被test1方法調(diào)用
export async function test1 (param) {
? ? // 返回一個(gè)Promise對(duì)象，真正需要返回給調(diào)用方的數(shù)據(jù)，放在resolve中
? ? return new Promise(resolve => {
? ? ? ? // request對(duì)象是對(duì)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中的同步和異步問題

同步

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

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

異步

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

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

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

異步任務(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 實(shí)現(xiàn)異步調(diào)用

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

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

// 異步請(qǐng)求同步的方法
    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);
    });

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持。