vue中异步数据获取（确保数据被获取）

àì夳堔傛蜴生んèń 2023-10-11 12:26 34阅读 0赞

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