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;         }); }