如何等待 Vue 函数通过 async/await 完成？答案

【问题标题】：How to wait for a Vue function to finish with async/await?如何等待 Vue 函数通过 async/await 完成？
【发布时间】：2021-04-03 19:43:20
【问题描述】：

我有一个在 while 循环中调用的 Vue 函数。该函数根据需要循环并总体上产生所需的结果。问题是该函数的某些区域需要 setTimeout 并且在这些循环发生时没有时间完成，并且对于代码的相关部分，它不会产生所需的结果。 “vm.getResults()”函数也是一个异步函数，如果这很重要的话。

有没有一种方法可以使用 async/await 或 promise 来实现，以便 while 循环等待“vm.getResults()”函数完成，直到它通过下一次迭代？

               while (i < data.length) {
                    (async function () {
                        async function getRes() {
                            let getPromise = new Promise(function (Resolve, Reject) {
                                vm.getResults()
                                // Can I put something here so it waits until the getResults function is finished?
                                Resolve()
                            });
                            var result = await getPromise
                            return result
                        }
                        getRes()
                    })(i++)

【问题讨论】：

就目前而言，您的整个 while 循环可以缩短为 while (i < data.length) { vm.getResults(); i++; }。您既没有使用i，也没有使用data，也没有使用vm.getResults() 的返回值。我认为这不是预期的行为？
是的，异步函数中的“i”不是必需的。有错别字，我会改正的。

标签： javascript vue.js

【解决方案1】：

您的代码中有多个级别的async 函数，如果您想等到每次迭代完成，每个级别都必须是awaited。但是，对于 awaits vm.getResults() 的循环，您真的只需要一个 async 包装器：

const data = { length: 3 }
const vm = { getResults: async () => new Promise(r => setTimeout(() => r(new Date()), 1000)) }

const loop = async () => {
  for (let i = 0; i < data.length; i++) {
    const date = await vm.getResults()
    console.log(`result[${i}]`, date)
  }
}

loop()

【讨论】：