Vue.js 문 닫는 동안 차단되지 않음(진행이 완료될 때까지 백엔드 대기)

Vue.js 문 닫는 동안 차단되지 않음(진행이 완료될 때까지 백엔드 대기)

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()통화 사이에 대기하는 성명서, 그러나 진술하는 동안 어떻게 이것을 비실행형으로 바꿀 것인지, 또는 단순히 이것을 달성하기 위한 최선의 실천요강이 무엇인지 확신할 수 없다.

편집: 원래 사용 중이었기 때문에 "비차단"wait()a로 진술하다.while루프. 그래서 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!
}

참조URL: https://stackoverflow.com/questions/51819243/vue-js-non-blocking-while-statement-polling-backend-until-progress-is-finished