Vue.js非阻塞while语句（在进度完成之前轮询后端）

在vue操作中，我希望轮询我的后端（调用另一个

async

操作，如下所述？），直到某物完成处理（前端显示加载程序，直到进度结束）

换言之，我希望重复进行如下API调用：

actions: {
    load: async ({dispatch, commit, state}, {args}) => {
    await dispatch('progressPolling', {progressUrl, userId})
    // continue ONLY when progress has finished, else blocks at this statement
    ...
    }

    progressPolling: async ({dispatch, commit}, {progressUrl, userId}) => {
        var finished = false
        while(!finished) : {
            var progress = await dispatch('getResource', {url: progressUrl, userId: userId})
            finished = (progress.data.finished === true)
            // timeout of 2 secs
         }
    }
...
}

我的理解是，您可以使用

setTimeout（）

语句在调用之间等待，但不知道如何将其转换为非阻塞while语句，或者不知道实现这一点的最佳实践是什么

---

EDIT：“非阻塞”，因为我最初是在

while

循环中使用

wait（）

语句。这使得UI每次不得不等待时都会冻结

我将使用递归函数来实现这一点

progressPolling: async ({dispatch, commit}, {progressUrl, userId}) => {
    // Define a recursive function
    async function getResource (resolve) {
        const progress = await dispatch('getResource', {url: progressUrl, userId: userId})
        // Recurse when not finished
        if (progress.data.finished !== true) {
            setTimeout( () => getResource(resolve), 2000);
        } 
    }
    // Kick the recursive function
    return new Promise (resolve => getResource(resolve))
    // Finished!
}

---

太好了，谢谢你的回答！您是否有可能在示例中添加

setTimeout（）

？我想在两次通话之间等待2秒，以避免API过载谢谢！我的印象是调用语句（在我的示例代码中，第一个

wait dispatch

）似乎只等待第一次迭代，即使它仍然在轮询。有什么想法吗？我现在意识到我的问题可能会有点混淆<代码>非阻塞，因为我使用了一个

wait（）

语句，这使得UI冻结（因为wait是阻塞的）。我想使用异步行为来避免阻塞UI，但在进程完成之前仍然会阻塞调用语句。