vue利用async和await异步变同步问题

Question

测试代码

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

请问该怎么写才能实现我要的效果？

Answer 1

原则就是——在异步但需要等待的地方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));
          });
        },
    }
}

Answer 2

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

没测试过你看看这样子行不行

Answer 3

首先你这种写法就错了 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');  
    });  
  }  
}