Vue.js async/await with then 函数未执行答案

【问题标题】：Vue.js async/await with then function not executingVue.js async/await with then 函数未执行
【发布时间】：2019-11-06 19:57:48
【问题描述】：

我正在尝试在 for of 循环中将 async/await 与 axios.then() 一起使用。该函数无法运行，甚至无法尝试 axios 调用。我感觉使用 then() 函数是问题的一部分。

我需要 for 循环等到 then() 函数运行后再继续处理下一个数组项。有什么想法可以改变我的代码以使 axios.then() 函数异步运行？

accounts = [{a},{b},{c}, ...] // Example of accounts array

async function get_user_data (accounts) {
  // For of loop
  for (let [index, user] of accounts.entries()) {
    // Currently using await before axios call
    await axios.get(url, headers)
      .then(function(data) {
        console.log(data)
      })
      .catch(function(error) {
        console.log(error)
      })
  }
}

更新：

问题最终是由 Vue 前端编译我的应用程序引起的。按照堆栈溢出解决方案posted here解决。请注意，代码现在按预期运行。 Dacre Denny 提供的解决方案帮助我确定问题必须位于其他地方，因为他应该可以解决问题，但直到 Vue 的问题解决后才解决。要点：

使用简单的测试来确认问题，而不是代码
如果上述方法不起作用，请检查 webpack、babel 和其他编译器配置

【问题讨论】：

我不认为在 for 循环中发送 http 请求是个好主意。
What's wrong with awaiting a promise chain?的可能重复
此for 循环将在继续之前等待.then() 运行。如果您认为不是，那么可能是因为您在 .then() 处理程序中执行的任何异步操作都没有返回承诺，因此它可以链接到链中。向我们展示您在 .then() 处理程序中的代码，我们更有可能为您提供帮助。
仅供参考，您不会在这里回答您的问题。你把答案放在答案中，把问题放在问题中。因此，既然您已经发布了自己的答案（此处允许），那么您应该从问题中删除答案内容。它不属于那里。过了一段时间，你也可以“接受”你的答案了。
鉴于问题不在问题中，导致问题的代理 (Vue.js) 未标记并且解决方案在另一篇文章中，要么更新标题并将此问题标记为重复，或删除它。

标签： javascript promise vuejs2 async-await axios

【解决方案1】：

一般来说，将promise接口（即.then()）与await/async语义混合在一起被认为是一种反模式。

看到get_user_data 函数定义为async，考虑基于try/catch 块的修订实现，以实现更清晰的程序流程和更好的循环异步行为可预测性：

async function get_user_data (accounts) {
  for (let [index, user] of accounts.entries()) {

    /* try/catch block allows async errors/exceptions to be caught
    without then need for a .catch() handler */
    try {    

        /* Using await, the response data can be obtained in this 
        way without the need for a .then() handler */
        const data = await axios.get(url, headers)
        console.log(data);
    }
    catch(error) {

        /* If an error occurs in the async axios request an exception
        is thrown and can be caught/handled here */
        console.log(error)
    }
  }
}

【讨论】：

这本身并不能解决 OP 遇到的任何问题，因为 OP 的代码已经在等待 .then() 处理程序运行。人们可以争论使用await 和.then() 的“风格”，但这不会导致OP 遇到任何问题。

【解决方案2】：

感谢 Dacre Denny 的快速帮助。他的测试代码帮助我确定问题不在于代码。

这个问题最终是由 Vue 前端编译我的应用程序引起的，该应用程序目前不支持开箱即用的 async/await。按照堆栈溢出解决方案posted here解决。请注意，代码现在按预期运行。要点：

使用简单的测试来确认问题不是代码
如果上面没有，请检查 webpack、babel 或其他编译器配置工作
函数运行失败时没有错误可能表示编译错误。检查配置。

【讨论】：

【解决方案3】：

  async get_user_data(accounts) {
        // For of loop
        (async() => {
            for (let [index, user] of accounts.entries()) {
                // Currently using await before axios call
                await axios.get(url, headers)
                    .then(function(data) {
                        console.log(data)
                    })
                    .catch(function(error) {
                        console.log(error)
                    })
            }
        })();
    },

【讨论】：