如何在 Vue.js 中使用 async/await？答案

【问题标题】：How to use async/await in Vue.js?如何在 Vue.js 中使用 async/await？
【发布时间】：2019-07-24 02:58:00
【问题描述】：

我是 ES7 新手

我想在 Vue.js 中使用 async/await

这是我的代码

created (){
    this.getA()
    console.log(2)
    this.getB() 
},
methods : {
    getA (){
        console.log(1)
    },
    getB (){
        console.log(3)
    }
}

1
2
3

但是当我将它与 axios 一起使用时，那么

created (){
    this.getA()
    console.log(2)
    this.getB() 
},
methods : {
    getA (){
        $axios.post(`/getA`,params){
        .then((result) => {
            console.log(1)
        })
    },
    getB (){
        console.log(3)
    }
}

2
3
1

所以我想在该代码中添加 async/await。

如何使用异步/等待？

我试过了

async created (){
    await this.getA()
    console.log(2)
    await this.getB() 
},
methods : {
    getA (){
        $axios.post(`/getA`,params){
        .then((result) => {
            console.log(1)
        })
    },
    getB (){
        console.log(3)
    }
}

返回相同的结果。

【问题讨论】：

getA 不返回承诺。

标签： javascript vue.js async-await ecmascript-2017

【解决方案1】：

Vuejs，带有 Axios API 请求的示例。代码之间的更多细节

  methods: {
    async getA(data, type) {
      console.log("This is a API calls, that the response time is vary.");

      const result = await this.getSources();
      
      console.log("Do what you want after completing the prev job.");
    },
    getSources() {
      return new Promise(resolve => {

        // Here the point is the resolve that you should resolve('something');.
        this.axios
          .get("/api/sources")
          .then((resp) => {
            this.sources = resp.data;
            resolve('resolved');
          })
          .catch(() => {
            resolve('rejected');
          });
      });
    },
  },

【讨论】：

【解决方案2】：

您必须使用then 或await，不能同时使用如下所示：

如果使用then

created () {
    this.getA().then((result) => {
            console.log(1)
            console.log(2)
            this.getB()
        })
},
methods : {
    getA () {
        return $axios.post(`/getA`,params);
    },
    getB (){
        console.log(3)
    }
}

如果使用await

async created (){
    await this.getA()
    console.log(1)
    console.log(2)
    this.getB() 
},
methods : {
    getA : async() => {
        return $axios.post(`/getA`,params);
    },
    getB : () => {
        console.log(3)
    }
}

请注意，在调用 getB() 时，您不需要 then 或 await，因为它不是异步的

【讨论】：

既然getB不是异步的，那么async对于getB有什么用呢？

【解决方案3】：

与@thanthu 所说的不同，您可以同时使用 then 和 await。在您的第一篇文章中，您只是错过了在 getA 方法中添加 return：

async created (){
    await this.getA()
    console.log(2)
    await this.getB() 
},
methods : {
    getA() {
        return $axios
            .post(`/getA`,params){
            .then((result) => {
                console.log(1)
            });
    },
    getB() { 
        console.log(3)
    }
}

【讨论】：

你可以。但是你应该吗？有一天，您会发现自己处于try-catch 和.catch(err => {console.log(err)}) 块的中间，有大量的async-await 和.then 和.all 指令。对于绅士来说，这可能是第二个最困难的挑战。当然，在尝试生下婴儿之后。对于女性 - 最困难的一个。
感觉还是要走的路，你正在等待一个在console.log(1)运行时结束的承诺

【解决方案4】：

试试这个

async created (){
    let resultFromgetA = await this.getA()
    console.log(2)
    await this.getB() 
},
methods : {
    getA :() =>{
        return $axios.post(`/getA`,params);
    },
    getB : async() =>{
        //use await key with async calls
        console.log(3)
    }
}

【讨论】：