vue+axios?methods方法return取不到值問題及解決
vue+axios methods方法return取不到值
vue寫了一個判斷電話號碼是否存在的方法無法取到返回值
原因
因為axios是異步操作,在獲取返回值時請求操作還沒有完成就已經(jīng)完成了賦值操作,所以結(jié)果的undefined。
解決方法
使用async + await。async聲明方法為異步方法,await等待異步操作執(zhí)行完。
另外: 異步方法返回值為peomise<>,接收時需要.then(res=>{})
vue返回axios的return值,很容易undefined
獲取axios的return值
1.如果直接在.then里return,得到的值就是undefined,如下
map(){ ?? ?let a=[] ?? ?mapChina().then(res=>{?? ?//調(diào)用axios自己封裝的接口 ?? ??? ?a=res? ?? ?}) ?? ?return a } const b=this.map()?? ??? ?//結(jié)果是undefined
因axios返回值是異步操作,獲取返回值時,請求操作還未完成,就已經(jīng)執(zhí)行了賦值,導(dǎo)致結(jié)果位undefined
2.解決方法使用async….await,async聲明發(fā)放為異步方法,await等待異步操作執(zhí)行完畢
async map(){ ?? ?let a=[] ?? ?await mapChina().then(res=>{?? ?//調(diào)用axios自己封裝的接口 ?? ??? ?a=res? ?? ?}) ?? ?return a } const b=await this.map() ?? ??? ?//結(jié)果正確返回a
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結(jié)合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-03-03npm如何更新VUE package.json文件中依賴的包版本
這篇文章主要介紹了npm如何更新VUE package.json文件中依賴的包版本問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vuex 解決報錯this.$store.commit is not a function的方法
這篇文章主要介紹了vuex 解決報錯this.$store.commit is not a function的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉(zhuǎn)跳操作
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉(zhuǎn)跳操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue實例配置對象中el、template、render的用法
這篇文章主要介紹了vue實例配置對象中el、template、render的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11vue結(jié)合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數(shù)組生成列表項,每個列表項包含一個復(fù)選框,復(fù)選框的v-model綁定到一個數(shù)組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09vue2基本響應(yīng)式實現(xiàn)方式之讓數(shù)組也變成響應(yīng)式
這篇文章主要介紹了vue2基本響應(yīng)式實現(xiàn)方式之讓數(shù)組也變成響應(yīng)式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04