遇到的問題

在目前一個需求中，我需要等待axios請求完成后，判斷請求是否出現異常，然后來判斷是否關閉彈窗

修改后大概代碼如下：

async submitForm() {
  let flag = false
  //表單驗證，默認通過
  let formValidation = true
  this.$refs['vForm'].validate(valid => {
    if (!valid){
      formValidation = false
    }
    //TODO: 提交表單
  })
  if (formValidation === true){
    //這里需要使用await，否則不會等待該方法運行完成
    await insertIllegalInfo(this.formData).then(res=>{
      this.$message.success("新增成功")
      flag = true
      console.log("新增成功了")
      console.log(flag)
    })
  }
  console.log("提交馬上返回了")
  console.log(flag)
  return flag
},

原來在方法中沒有使用async和await，由于發(fā)送的axios請求是異步請求，所以在請求還沒完成的時候submitForm這個方法就已經將flag返回了

這就導致了一個問題，如果我在后端在處理請求的時候出現異常，我在這里無法進行處理

經過百度搜索，發(fā)現使用async+await能夠解決該問題，將異步方法改為同步方法，在方法前面加上async進行修飾，然后在axios請求前使用await進行修飾即可，這樣就不會出現異步的問題

這個問題解決后，又出現了一個新的問題，就是我在這里不是返回了一個flag嗎,我在另外一個vue頁面中需要獲取到return返回的這個flag，但是按照正常步驟獲取不到

后來經過查詢資料后發(fā)現了原因，如下:

• async 是一個修飾符，async 定義的函數會默認的返回一個Promise對象resolve的值，因此對async函數可以直接進行then操作,返回的值即為then方法的傳入函數。
• await 也是一個修飾符，await 關鍵字 只能放在 async 函數內部， await關鍵字的作用 就是獲取 Promise中返回的內容， 獲取的是Promise函數中resolve或者reject的值。
• async/await 是一種編寫異步代碼的新方法。之前異步代碼的方案是回調和 promise。
• async/await 是建立在 promise 的基礎上。（如果對Promise不熟悉，我已經著手在寫Promise的文章了）
• async/await 像 promise 一樣，也是非阻塞的。
• async/await 讓異步代碼看起來、表現起來更像同步代碼。這正是其威力所在。

主要原因就是async 定義的函數會默認的返回一個Promise對象resolve的值，所以我們需要使用then去進行取值，如下

submitInsertIllegalInfoDialog(){
    //重要的是這里，這里調用了上面說的的submitForm方法
  this.$refs.insertIllegalInfoDialog.submitForm().then(flag=>{
    console.log(flag)
    if (flag === true){
      console.log("馬上關閉彈窗了")
        //這個是來關閉彈窗的
      this.insertIllegalInfoDialogVisible = false
      console.log("重新查詢")
      this.getIllegalInfoList()
      this.$refs.insertIllegalInfoDialog.resetForm();
    }
  })
},

總結

學會async和await的使用能夠讓我在開發(fā)vue項目的時候更加靈活，之后在遇到axios異步請求沖突的時候可以參考本篇文章進行解決

到此這篇關于Vue之Axios的異步請求問題詳解的文章就介紹到這了,更多相關Vue Axios異步請求內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論