今天给大家介绍一下vue中异步数据获取方式是什么。文章的内容小编觉得不错,现在给大家分享一下,觉得有需要的朋友可以了解一下,希望对大家有所帮助,下面跟着小编的思路一起来阅读吧。
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对象
返回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;
});
}
后端返回该地址的坐标经纬度,需要前端用百度地图api处理成详情地址
处理过程在遍历中直接引入
处理完数据后返回并绑定到el-table列表
通过打印发现getLocation()方法响应过慢,导致数据渲染时该字段为空
抽离出处理数据的方法,用异步处理方式返回
返回的之中存在空值。。。
所以。。。。。在外层调用时同样需要异步操作
因为获取详情地址的方法是逐条处理的,所以在调用的外层进行了遍历
以上就是vue中异步数据获取方式是什么的全部内容了,更多与vue中异步数据获取方式是什么相关的内容可以搜索亿速云之前的文章或者浏览下面的文章进行学习哈!相信小编会给大家增添更多知识,希望大家能够支持一下亿速云!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。