vue同步异步请求数据,vue解决异步取值问题
本文主要介绍了vue中的异步数据采集方法(保证数据被采集)，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
获取vue 1中的异步数据。获取异步数据，传递异步/等待限制2。简单记录下Vue处理数据(同步，异步)的问题，一个方法的返回值，并介绍最终的解决方案：new Promise()
vue中异步数据获取
1、获取异步数据，通过async/await限制
从“@/api/article”导入{ fetchList }
//在created中开始。
已创建(){
this.getList()
}
方法：{
异步获取列表(){
this.listLoading=true
//ES6的写法和then方法链调用一样，但是简洁直观。
//写入const以确保原始数据不被更改。
const { data }=await fetch list(this . list query)
//代码被await阻止
常量项目=数据项目
this.list=items.map(v={
})
this.listLoading=false
},
}
eg1:
changeA(){
返回3
},
异步getAsync(){
设a=1
a=await this.changeA()
Console.log(a) //打印结果是3
},
//changeA中没有异步操作，程序自上而下执行
eg2:
异步更改A(){
设a=22
等待setTimeout(()={
Console.log(异步)
a=33
})
Console.log(“异步结果”)
返回a
},
异步getAsync(){
设a=1
等待this.changeA()
console.log(a)
},
//打印结果是
异步结果
2//a的结果
中等异步
//结论await不阻止异步代码。
eg3:
changeA(){
返回新承诺((解决)={
setTimeout(()={
Console.log(异步)
解决()
},2000)
})
},
异步getAsync(){
等待this.changeA()
Console.log(同步)
},
//两秒钟后打印结果
异步的
同时发生
//结论：成功阻止代码。
eg4:
changeA(){
返回新承诺((解决)={
setTimeout(()={
Console.log(异步)
解决()
},2000)
})
},
异步getAsync(){
this.changeA()
Console.log(同步)
},
//先打印同步，两秒后打印异步。
总结：await后面的函数异步返回promise时，后续的同步代码会被阻塞，上面的eg可以证实。
tips:
异步函数也立即返回一个promise对象。
2、将一个方法的返回值
返回promise函数，方法结束后就可以使用链式结构了。
方法：{
getProfile(id) {
let query={
援助：id
};
//返回一个承诺对象
返回新承诺(异步解决={
const { data }=await API . get profile list(query)
//同步代码被await阻止
this.profileList=data
this . graphic(this . datax，this . datay)；
resolve()；
});
},
//获得赋值后，再次打开弹出窗口
this.getProfile(aid)。然后(()={
this.dialogVisible3=true
});
}
vue处理数据（同步，异步）问题简单记录
情况介绍
后端返回这个地址的坐标经纬度，前端需要用百度地图api处理成详细的地址。
在遍历中直接引入处理过程。
处理完数据后，返回并绑定到el-table列表。
通过打印发现getLocation()方法响应太慢，导致数据渲染时这个字段为空。
最终解决方法：new Promise()
拉出处理数据的方法，通过异步处理返回。
返回的中有空值。
因此.调用外层时也需要异步操作。
因为获取详细地址的方法是逐个处理的，所以在调用的外层进行遍历。。最终解决问题
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。