VueActions에서 약속을 데이지 체인으로 연결하면 무한 루프가 발생함

VueActions에서 약속을 데이지 체인으로 연결하면 무한 루프가 발생함

저는 VueJS 설정의 Javascript Promisses에 대해 질문이 있습니다. 저는 Action을 사용하여 IndexedDB에서 국가 목록을 가져오거나 Axios HTTP 요청을 만들어 API에서 가져오는 애플리케이션을 가지고 있습니다.

이제 이 작업이 완료되면 UI에서 일부 팝업을 트리거할 수 있고 Axios와 Dexie(인덱스에 사용)를 모두 트리거할 수 있기 때문에 작업에서 약속을 반환합니다.DB) Promise 자체를 통해 비동기식으로 실행됩니다.

  getCountries({commit, dispatch}) {

    commit(types.MUTATIONS.SET_LOADING, true, {root: true})
    commit(types.MUTATIONS.SET_LOADER_MESSAGE, "Loading Countries Data...", {root: true})

    return new Promise((resolve, reject) => {
      db.countries.count().then(value => {
        if(value > 0) {
          console.log("Loading Countries from IndexedDB")
          db.countries.toArray().then(collection => {
            commit(types.MUTATIONS.COUNTRIES.SET, collection, {root: true})
            resolve(collection);
          })
        } else {
          fetchCountriesData().then(data => {
            console.log("Loading Countries from API Call")
            commit(types.MUTATIONS.COUNTRIES.SET, data, {root: true})
            db.countries.bulkAdd(data)
            resolve(data)
          }).catch(error => {
            reject(error)
          })
        }
      })
    })
  }

이것이 바로 동작의 코드이며, 단순히 위에서 설명한 것을 수행합니다. 문제는 로더 돌연변이가 반복적으로 트리거되는 무한 루프가 발생한다는 것입니다.

정확히 왜 이런 일이 벌어지고 있는 거지?누가 이것을 이해하는 것을 도와줄 수 있습니까?초기 API 작업을 실행하는 것처럼 보이지만, 그 후에 이미 로드된 국가들과 함께, 인덱스된 db 변환을 다시 호출하여 루프하고 실행합니다. 이상합니다. 제가 해결하면 여기서 끝나야 하지 않나요?

추가:

작업은 응용프로그램에 있는 보기에서 호출되고, 나는 이것을 호출합니다.created()국가 목록이 항상 내 Vuex 상태로 로드되도록 후크합니다.

created() {
  this.getAllCountries().then(response => {}).catch(error => {
    snackbar("Unable to load countries!", "error")
  }).then(() => {
    this.setLoadingStatus(false);
  })
}

이 상황에서는 문제가 없으면 아무 것도 하지 않지만 나중에 변경될 수도 있습니다. 오류가 발생하면 사용자에게 데이터를 로드할 수 없음을 알리는 팝업이 표시되어야 하며, 두 경우 모두 로드 막대(Vuex를 통해 처리됨)를 숨겨야 합니다.

이것이 문제의 원인이 될 수 있습니까?

신경쓰지 마세요, 제 코드에 논리 오류가 있었습니다. 기본적으로 로드하는 동안 누구나 항목을 클릭할 수 없도록 하기 위해 조건부로 보기를 설정했습니다.v-if="loading"로드하는 경우 Loader div만 표시하고 그렇지 않은 경우 실제 레이아웃을 표시합니다.

이 접근 방식의 문제는 이 방식이 다시 트리거한다는 것입니다.created메인 뷰가 다시 표시될 때마다 후크가 걸려 바보 같은 루프가 발생합니다.

이것이 미래에 누군가에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/45999421/daisy-chaining-promises-in-vue-actions-results-in-infinite-loop