Vue.js 非阻塞 while 语句（轮询后端直到进度完成）

Question

在一个 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 语句，或者只是实现此目的的最佳实践是什么。

编辑：“非阻塞”，因为我最初在 while 循环中使用了 wait() 语句。这使得 UI 每次必须等待时都会冻结。

Answer 1

我会使用递归函数来做到这一点。

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!
}