vue中异步数据获取方式(确保数据被获取)
时间:2023-02-03 07:39:23|栏目:vue|点击: 次
vue中异步数据获取
1、获取异步数据,通过async/await限制
import { fetchList } from '@/api/article' //在created中即开始获取 created() { this.getList() } methods:{ async getList() { this.listLoading = true //ES6写法,与then方法链式调用相同,但比较简洁直观 //const的写法,保证原数据不被更改 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) //打印结果为3 }, //changeA中没有异步操作,程序从上往下执行
eg2:
async changeA(){ let a =22 await setTimeout(()=>{ console.log('异步中') a = 33 }) console.log('异步结果') return a }, async getAsync(){ let a = 1 await this.changeA() console.log(a) }, //打印结果为 异步结果 22 //a的结果 异步中 //结论await并未阻塞异步的代码
eg3:
changeA(){ return new Promise((resolve)=>{ setTimeout(()=>{ console.log('异步') resolve() },2000) }) }, async getAsync(){ await this.changeA() console.log('同步') }, //两秒后打印结果 异步 同步 //结论:成功阻塞代码
eg4:
changeA(){ return new Promise((resolve)=>{ setTimeout(()=>{ console.log('异步') resolve() },2000) }) }, async getAsync(){ this.changeA() console.log('同步') }, //先打印同步,两秒后打印异步
总结:当await后面跟的函数存在异步且返回promise的时候,才会阻塞之后的同步代码,由上述eg可以印证
tips:
async函数也会立即返回一个promise对象
2、将一个方法的返回值
返回promise函数,可以在该方法结束后,使用链式结构
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(); }); }, //当得到赋值的时候,再打开弹窗 this.getProfile(aid).then(() => { this.dialogVisible3 = true; }); }
vue处理数据(同步,异步)问题简单记录
情况介绍
后端返回该地址的坐标经纬度,需要前端用百度地图api处理成详情地址
处理过程在遍历中直接引入
处理完数据后返回并绑定到el-table列表
通过打印发现getLocation()方法响应过慢,导致数据渲染时该字段为空
最终解决方法:new Promise()
抽离出处理数据的方法,用异步处理方式返回
返回的之中存在空值。。。
所以。。。。。在外层调用时同样需要异步操作
因为获取详情地址的方法是逐条处理的,所以在调用的外层进行了遍历
。。。。。。。。最终解决问题