vue中异步数据获取方式(确保数据被获取)
作者：二水你要努力啊
这篇文章主要介绍了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()
抽离出处理数据的方法，用异步处理方式返回
返回的之中存在空值。。。
所以。。。。。在外层调用时同样需要异步操作
因为获取详情地址的方法是逐条处理的，所以在调用的外层进行了遍历
。。。。。。。。最终解决问题
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。