vue利用async和await异步变同步问题_前端问题_站长_知道

测试代码

mounted(){  
  this.test();  
},  
methods:{  
  test(){  
    this.testapi1();  
    this.testapi2();  
  },  
  testapi1(){  
    console.log('testapi1 start');  
     this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    }).then(data=>{  
      console.log('testapi1 data')  
    });  
    console.log('testapi1 end')  
  },  
  testapi2(){  
    console.log('testapi2 start');  
    this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    }).then(data=>{  
      console.log('testapi2 data');  
    });  
    console.log('testapi2 end');  
  }  
}


我现在想要的预期输出结果是
testapi1 start
testapi1 data
testapi1 end
testapi2 start
testapi2 data
testapi2 end
我知道应该用async配合await，但我自己试了下边两种写法都不行
第一种写法
async testapi1(){  
    console.log('testapi1 start');  
     await this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    }).then(data=>{  
      console.log('testapi1 data')  
    });  
    console.log('testapi1 end')  
  }

输出结果
testapi1 start
testapi2 start
testapi2 end
testapi1 data
testapi1 end
testapi2 data
第二种
async test(){  
    await this.testapi1();  
    this.testapi2();  
  },  

输出结果
testapi1 start
testapi1 end
testapi2 start
testapi2 end
testapi1 data
testapi2 data
请问该怎么写才能实现我要的效果？



 已解决
 悬赏分：30

- 解决时间 2021-11-26 17:55


点赞 0反对 0举报 0
收藏 0
分享 0

            
        
            回答3 
最佳

                        
                        
                            @wang124

原则就是——在异步但需要等待的地方await，或者说是异步但需要异步执行完再往下走的地方await,这里是尽量按照你原有的代码写的，实际上request的响应是可以通过await拿到的，不需要then
{
// ...
    created(){
        this.test();
    },
    methods: {
        async test() {
          await this.test1();
          this.test2();
        },
        async test1() {
          console.log('test1 start');
          await this.request().then(() => console.log('test1 data'));
          console.log('test1 end');
        },
        async test2() {
          console.log('test2 start');
          await this.request().then(() => console.log('test2 data'));
          console.log('test2 end');
        },
        request() {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(Math.random());
            }, Math.floor(Math.random() * 100));
          });
        },
    }
}



 
支持 0
反对 0
举报


                            
                            2021-11-26 07:30
                            
                        



    

 

                        

                        
                            
@aidaping

mounted(){  
  this.test();  
},  
methods:{  
  async test(){  
    await this.testapi1();  
    await this.testapi2();  
  },  
  async testapi1(){  
    console.log('testapi1 start');  
    let res = await this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    })
    console.log('testapi1 data') 
    console.log('testapi1 end')  
  },  
  async testapi2(){  
    console.log('testapi2 start');  
    let res = await this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    })
    console.log('testapi2 data');
    console.log('testapi2 end');  
  }  
}
没测试过你看看这样子行不行


 
支持 0
反对 0
举报


                            
                                2021-11-26 09:04
                        


                        

                        
                            
@hxs841007

首先你这种写法就错了  console.log('testapi1 end')   是同步执行不可能在 console.log('testapi1 data') 之后
另外 testapi1 只应该吧 return this.$request
methods:{  
  async test(){  
    await testapi1()
    console.log('testapi1 end')
    await testapi2()
    console.log('testapi2 end')
  },  
  testapi1(){  
    console.log('testapi1 start');  
    return this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    }).then(data=>{  
      console.log('testapi1 data')  
    });  
  },  
  testapi2(){  
    console.log('testapi2 start');  
    return this.$request({  
      url:'/api',  
      method:'post',  
      data:{}  
    }).then(data=>{  
      console.log('testapi2 data');  
    });  
  }  
}


 
支持 0
反对 0
举报


                            
                                2021-11-26 09:09