欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue之Axios的異步請求問題詳解

 更新時(shí)間:2023年02月10日 10:25:18   作者:愛學(xué)習(xí)的大雄  
總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路,Axios是一個(gè)開源的可以用在瀏覽器端和Node JS的異步通信框架,主要作用就是實(shí)現(xiàn)AJAX異步通信

遇到的問題

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

修改后大概代碼如下:

async submitForm() {
  let flag = false
  //表單驗(yàn)證,默認(rèn)通過
  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
},

原來在方法中沒有使用asyncawait,由于發(fā)送的axios請求是異步請求,所以在請求還沒完成的時(shí)候submitForm這個(gè)方法就已經(jīng)將flag返回了

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

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

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

后來經(jīng)過查詢資料后發(fā)現(xiàn)了原因,如下:

  • async 是一個(gè)修飾符,async 定義的函數(shù)會(huì)默認(rèn)的返回一個(gè)Promise對象resolve的值,因此對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 是一種編寫異步代碼的新方法。之前異步代碼的方案是回調(diào)和 promise。
  • async/await 是建立在 promise 的基礎(chǔ)上。(如果對Promise不熟悉,我已經(jīng)著手在寫Promise的文章了)
  • async/await 像 promise 一樣,也是非阻塞的。
  • async/await 讓異步代碼看起來、表現(xiàn)起來更像同步代碼。這正是其威力所在。

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

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

總結(jié)

學(xué)會(huì)async和await的使用能夠讓我在開發(fā)vue項(xiàng)目的時(shí)候更加靈活,之后在遇到axios異步請求沖突的時(shí)候可以參考本篇文章進(jìn)行解決

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

相關(guān)文章

  • Vue中使用方法、計(jì)算屬性或觀察者的方法實(shí)例詳解

    Vue中使用方法、計(jì)算屬性或觀察者的方法實(shí)例詳解

    這篇文章主要介紹了Vue中如何使用方法、計(jì)算屬性或觀察者的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2018-10-10
  • vue中如何通過函數(shù)傳參數(shù)

    vue中如何通過函數(shù)傳參數(shù)

    這篇文章主要介紹了vue中如何通過函數(shù)傳參數(shù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法

    element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法

    走馬燈功能在展示圖片時(shí)經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • vue3項(xiàng)目打包與上線詳細(xì)圖文教程

    vue3項(xiàng)目打包與上線詳細(xì)圖文教程

    這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目打包與上線的相關(guān)資料,在項(xiàng)目完成得差不多得時(shí)候,就可以開始打包部署了,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • 使用provide/inject實(shí)現(xiàn)跨組件通信的方法

    使用provide/inject實(shí)現(xiàn)跨組件通信的方法

    在 Vue 應(yīng)用中,組件間通信是構(gòu)建復(fù)雜應(yīng)用時(shí)的一個(gè)常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實(shí)現(xiàn)跨組件通信,并通過示例代碼一步步進(jìn)行說明,需要的朋友可以參考下
    2024-03-03
  • 關(guān)于element-ui resetFields重置方法無效問題及解決

    關(guān)于element-ui resetFields重置方法無效問題及解決

    這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • Vue中使用v-print打印出現(xiàn)空白頁問題及解決

    Vue中使用v-print打印出現(xiàn)空白頁問題及解決

    這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • vue3+Typescript實(shí)現(xiàn)路由標(biāo)簽頁和面包屑功能

    vue3+Typescript實(shí)現(xiàn)路由標(biāo)簽頁和面包屑功能

    在使用 Vue.js 開發(fā)后臺(tái)管理系統(tǒng)時(shí),經(jīng)常會(huì)遇到需要使用路由標(biāo)簽頁的場景,這篇文章主要介紹了vue3+Typescript實(shí)現(xiàn)路由標(biāo)簽頁和面包屑,需要的朋友可以參考下
    2023-05-05
  • 詳解vue 計(jì)算屬性與方法跟偵聽器區(qū)別(面試考點(diǎn))

    詳解vue 計(jì)算屬性與方法跟偵聽器區(qū)別(面試考點(diǎn))

    這篇文章主要介紹了詳解vue 計(jì)算屬性與方法跟偵聽器區(qū)別(面試考點(diǎn)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04
  • electron踩坑之remote of undefined的解決

    electron踩坑之remote of undefined的解決

    這篇文章主要介紹了electron踩坑之remote of undefined的解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10

最新評論