技術標籤：vue

總結一下目前我瞭解到的非同步請求的幾種方式，後續繼續補充。

Vue處理非同步請求

• 一、使用promise處理非同步
• 二、使用async-await處理

一、使用promise處理非同步

首先可以先了解一下ES6-promise的具體使用方法。
執行步驟：
1，例項化Promise（new Promise（function（resolve,reject）））
2，用Promise的例項呼叫then方法
簡單示例：

function checkFunc() {
let p = new Promise(function (resolve, reject) {
    // 一些比較耗時非同步操作
 

    if(操作完成標識) {
        resolve();
    }
});
p.then(function (data) {
    layer.confirm('執行下一步操作？', {
        btn: ['確定', '取消']
    }, function () {
       // 確保上面的操作都完成後，才執行下面的操作
       // 其他操作...
    });
});
}

應用：

loadQuotaForm () {
  return new Promise((resolve, reject) => {
    quotaFormDetail
 
(this.quotaId).then(resp => {
      this.quotaForm = resp.data.data
      // 重置表單
      this.dataForm.parentQuotaId = this.quotaForm.parent ? this.quotaForm.parent.quotaId : ''
      resolve(resp.data.data)//沒引數 :resolve()
    })
  })
},
init(){
//先執行loadQuotaForm 後將返回資料作為引數執行loadAndInitQuotaData
	this
 
.loadQuotaForm().then((quotaForm) => {
	  // 載入並初始化指標資料
	  this.loadAndInitQuotaData(quotaForm)
	})
}

二、使用async-await處理

使用async-await將使得整個函式延後執行，即同步的程式碼執行完畢後再執行；對於async函式的內部，使用了await的地方，會先執行，然後再執行函式內await之後的同步程式碼。

mounted(){
  console.log('1');
  this.getXx();
  console.log('2')
}
methods:{
   async getXx(){
     await this.$http({
       url : xx,
       method:'get',
     })
     .then((res)=>{
       console.log('3');
     });
     //等待await執行完畢再執行下面的同步函式
     console.log('4')
   }
 }

執行結果為：1 2 3 4