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()

抽离出处理数据的方法，用异步处理方式返回

返回的之中存在空值。。。

所以。。。。。在外层调用时同样需要异步操作

因为获取详情地址的方法是逐条处理的，所以在调用的外层进行了遍历

。。。。。。。。最终解决问题

来源：https://blog.csdn.net/qq_33601443/article/details/101208740