目錄

• vue同步方法實現
• 有三種實現方式
• vue中的同步和異步問題
• 同步
• 異步
• 總結

vue同步方法實現

有三種實現方式

1、axios本身屬于Promise

利用函數式的then獲取請求返回結果，也是最常用的，如下：

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

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

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

2、async結合await

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

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

3、引入jquery

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

vue中的同步和異步問題

同步

在主線程上排隊之行的任務,只有在最前面的任務執行完成之后,才之行后面的任務。

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

異步

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

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

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

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

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

事件執行順序：

• 1.先執行宏任務，在執行微任務
• 2.微任務根據先進先出的順序執行
• 3.微任務清空后在執行宏任務
• 4.按先進先出的順序取出執行

Promise 實現異步調用

asnyc/await 實現同步調用

   // 項目中使用的事例：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);
    });

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持。