vue+axios?methods方法return取不到值問題及解決
vue+axios methods方法return取不到值
vue寫了一個判斷電話號碼是否存在的方法無法取到返回值
原因
因為axios是異步操作,在獲取返回值時請求操作還沒有完成就已經完成了賦值操作,所以結果的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=>{?? ?//調用axios自己封裝的接口 ?? ??? ?a=res? ?? ?}) ?? ?return a } const b=this.map()?? ??? ?//結果是undefined
因axios返回值是異步操作,獲取返回值時,請求操作還未完成,就已經執(zhí)行了賦值,導致結果位undefined
2.解決方法使用async….await,async聲明發(fā)放為異步方法,await等待異步操作執(zhí)行完畢
async map(){ ?? ?let a=[] ?? ?await mapChina().then(res=>{?? ?//調用axios自己封裝的接口 ?? ??? ?a=res? ?? ?}) ?? ?return a } const b=await this.map() ?? ??? ?//結果正確返回a
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue-cli結合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能
這篇文章主要介紹了vue-cli結合Element-ui基于cropper.js封裝vue實現(xiàn)圖片裁剪組件功能,本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下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使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-07-07vue實例配置對象中el、template、render的用法
這篇文章主要介紹了vue實例配置對象中el、template、render的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11vue結合v-for和input實現(xiàn)多選列表checkbox功能
在Vue中,可通過v-for指令和v-model實現(xiàn)多選列表功能,首先,使用v-for指令遍歷數組生成列表項,每個列表項包含一個復選框,復選框的v-model綁定到一個數組變量,用于存儲選中的值,感興趣的朋友跟隨小編一起看看吧2024-09-09