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

回答3

最佳
  • @

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

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