Question

我正在尝试在for循环中对axios.then（）使用async / await。该函数无法运行，甚至无法尝试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和其他编译器配置

Answer 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)
    }
  }
}

Answer 2

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

问题最终是由Vue前端编译我的应用程序引起的，该应用程序目前不支持开箱即用的异步/等待功能。通过遵循堆栈溢出解决方案posted here解决。请注意，该代码现在可以按预期运行。走道：

使用简单的测试来确认问题与代码无关
如果上面没有显示，请检查webpack，babel或其他编译器配置工作
如果函数无法运行，则缺少错误可能表示编译错误。检查配置。

Answer 3

ngOnInit(): void {
  this.active$ = new BehaviorSubject<boolean>(true);
  timer(500, 500).pipe(
    bufferIf(this.active$.pipe(map(v => !v))),
    tap(value => this.pauseOn(value) ? this.active$.next(false) : null) // pause the stream on 
  ).subscribe(console.log);
}

pauseOn(value: number): boolean { return value > 0 && value % 10 === 0; }

Vue.js异步/等待，然后函数不执行

3 个答案: