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

Posted 2023-03-07

【中文标题】如何在 Vue.js 中使用 async/await？

【英文标题】：How to use async/await in Vue.js?

【发布时间】：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 不返回承诺。

【参考方案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)