vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
vue中異步數(shù)據(jù)獲取
1、獲取異步數(shù)據(jù),通過async/await限制
import { fetchList } from '@/api/article' //在created中即開始獲取 created() { ? ? this.getList() } methods:{ ?? ?async getList() { ? ? ? this.listLoading = true ? ? ?? ? ? ? //ES6寫法,與then方法鏈?zhǔn)秸{(diào)用相同,但比較簡潔直觀 ? ? ? //const的寫法,保證原數(shù)據(jù)不被更改 ? ? ? const { data } = await fetchList(this.listQuery) ? ? ?? ? ? ? //被await阻塞的代碼 ? ? ? const items = data.items ? ? ? this.list = items.map(v => { ? ? ? }) ? ? ? this.listLoading = false ? ? }, }
eg1:
?? ?changeA(){ ? ? ? return ?3 ? ? }, ? ? async getAsync(){ ? ? ? let a = 1 ? ? ? a = await this.changeA() ? ? ? console.log(a) ? //打印結(jié)果為3 ? ? }, ? ? //changeA中沒有異步操作,程序從上往下執(zhí)行
eg2:
? ? async changeA(){ ? ? ?let a ?=22 ? ? ?await ?setTimeout(()=>{ ? ? ? ?console.log('異步中') ? ? ? ?a = 33 ? ? ?}) ? ? ?console.log('異步結(jié)果') ? ? ?return a ? ? }, ? ? async getAsync(){ ? ? ? let a = 1 ? ? ? await this.changeA() ? ? ? console.log(a) ? ? ? }, ? ? ?//打印結(jié)果為? ? ? ?異步結(jié)果 ? ? ?22 ? ? ? ? ? ? //a的結(jié)果 ? ? ?異步中 ? ? ?//結(jié)論await并未阻塞異步的代碼
eg3:
?? ?changeA(){ ? ? ? return new Promise((resolve)=>{ ? ? ? ? setTimeout(()=>{ ? ? ? ? ? console.log('異步') ? ? ? ? ? resolve() ? ? ? ? },2000) ? ? ? }) ? ? }, ? ? async getAsync(){ ? ? ? await this.changeA() ? ? ? console.log('同步') ?? ? ? }, ? ? //兩秒后打印結(jié)果? ? ? 異步 ? ? 同步 ? ? //結(jié)論:成功阻塞代碼
eg4:
?? ?changeA(){ ? ? ? return new Promise((resolve)=>{ ? ? ? ? setTimeout(()=>{ ? ? ? ? ? console.log('異步') ? ? ? ? ? resolve() ? ? ? ? },2000) ? ? ? }) ? ? }, ? ? async getAsync(){ ? ? ? this.changeA() ? ? ? console.log('同步') ?? ? ? }, ? ? //先打印同步,兩秒后打印異步
總結(jié):當(dāng)await后面跟的函數(shù)存在異步且返回promise的時候,才會阻塞之后的同步代碼,由上述eg可以印證
tips:
async函數(shù)也會立即返回一個promise對象
2、將一個方法的返回值
返回promise函數(shù),可以在該方法結(jié)束后,使用鏈?zhǔn)浇Y(jié)構(gòu)
methods:{ ?? ? getProfile(id) { ?? ? ? ? ?let query = { ?? ? ? ? ? ?aid: id ?? ? ? ? ?}; ?? ? ? ? ?//返回一個promise對象 ?? ? ? ? ?return new Promise(async resolve => { ?? ? ? ? ? ?? ? ?const {data} = await api.getProfileList(query) ?? ? ? ? ? ?? ? ?//被await阻塞的同步代碼 ?? ? ? ? ? ? ?this.profileList = data; ?? ? ? ? ? ? ?this.graphical(this.dataX, this.dataY); ?? ? ? ? ? ? ?resolve(); ?? ? ? ? ?}); ?? ? ? ?}, ?//當(dāng)?shù)玫劫x值的時候,再打開彈窗 ? ? ? ? this.getProfile(aid).then(() => { ? ? ? ? ? this.dialogVisible3 = true; ? ? ? ? }); }
vue處理數(shù)據(jù)(同步,異步)問題簡單記錄
情況介紹
后端返回該地址的坐標(biāo)經(jīng)緯度,需要前端用百度地圖api處理成詳情地址
處理過程在遍歷中直接引入
處理完數(shù)據(jù)后返回并綁定到el-table列表
通過打印發(fā)現(xiàn)getLocation()方法響應(yīng)過慢,導(dǎo)致數(shù)據(jù)渲染時該字段為空
最終解決方法:new Promise()
抽離出處理數(shù)據(jù)的方法,用異步處理方式返回
返回的之中存在空值。。。
所以。。。。。在外層調(diào)用時同樣需要異步操作
因為獲取詳情地址的方法是逐條處理的,所以在調(diào)用的外層進行了遍歷
。。。。。。。。最終解決問題
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決
這篇文章主要介紹了vue子組件封裝彈框只能執(zhí)行一次的mounted問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vant中List組件immediate-check=false無效的解決
這篇文章主要介紹了Vant中List組件immediate-check=false無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01