快捷導(dǎo)航

Vue之Axios的異步請(qǐng)求問(wèn)題詳解

更新時(shí)間：2023年02月10日 10:25:18 作者：愛(ài)學(xué)習(xí)的大雄

總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路，Axios是一個(gè)開(kāi)源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信

遇到的問(wèn)題

在目前一個(gè)需求中，我需要等待axios請(qǐng)求完成后，判斷請(qǐng)求是否出現(xiàn)異常，然后來(lái)判斷是否關(guān)閉彈窗

修改后大概代碼如下：

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

原來(lái)在方法中沒(méi)有使用async和await，由于發(fā)送的axios請(qǐng)求是異步請(qǐng)求，所以在請(qǐng)求還沒(méi)完成的時(shí)候submitForm這個(gè)方法就已經(jīng)將flag返回了

這就導(dǎo)致了一個(gè)問(wèn)題，如果我在后端在處理請(qǐng)求的時(shí)候出現(xiàn)異常，我在這里無(wú)法進(jìn)行處理

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

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

后來(lái)經(jīng)過(guò)查詢(xún)資料后發(fā)現(xiàn)了原因，如下:

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

主要原因就是async 定義的函數(shù)會(huì)默認(rèn)的返回一個(gè)Promise對(duì)象resolve的值，所以我們需要使用then去進(jìn)行取值，如下

submitInsertIllegalInfoDialog(){
    //重要的是這里，這里調(diào)用了上面說(shuō)的的submitForm方法
  this.$refs.insertIllegalInfoDialog.submitForm().then(flag=>{
    console.log(flag)
    if (flag === true){
      console.log("馬上關(guān)閉彈窗了")
        //這個(gè)是來(lái)關(guān)閉彈窗的
      this.insertIllegalInfoDialogVisible = false
      console.log("重新查詢(xún)")
      this.getIllegalInfoList()
      this.$refs.insertIllegalInfoDialog.resetForm();
    }
  })
},