nuxt 가져오기 후크 요청을 취소하는 중

nuxt 가져오기 후크 요청을 취소하는 중

Nuxt의 fetch hook은 병렬로 실행할 수 없기 때문에 다른 루트로 이동할 때 fetch hook에서 수행한 요청을 취소할 수 있는 방법이 필요했기 때문에 사용자가 다른 루트로 이동할 때 첫 번째 fetch가 완료될 때까지 기다릴 필요가 없었습니다.그래서 저는 다음과 같은 접근법을 찾았습니다.루트 변경 시 모든 Axios 요청을 취소하는 방법

그래서 다음 플러그인 파일을 만들었습니다.

router.displaces

export default ({ app, store }) => {
  // Every time the route changes (fired on initialization too)
  app.router.beforeEach((to, from, next) => {
    store.dispatch('cancel/cancel_pending_requests')
    next()
  })
}

악시오스

export default function ({ $axios, redirect, store }) {
  $axios.onRequest((config) => {
    const source = $axios.CancelToken.source()

    config.cancelToken = source.token
    store.commit('cancel/ADD_CANCEL_TOKEN', source)
    return config
  }, function (error) {
    return Promise.reject(error)
  })
}

취소 토큰을 위한 작은 vuex 스토어:

export const state = () => ({
  cancelTokens: []
})

export const mutations = {
  ADD_CANCEL_TOKEN (state, token) {
    state.cancelTokens.push(token)
  },
  CLEAR_CANCEL_TOKENS (state) {
    state.cancelTokens = []
  }
}

export const actions = {
  cancel_pending_requests ({ state, commit }) {
    state.cancelTokens.forEach((request, i) => {
      if (request.cancel) {
        request.cancel('Request canceled')
      }
    })
    commit('CLEAR_CANCEL_TOKENS')
  }
}

이 접근방식은 정상적으로 동작하며 루트 변경 시 499로 요청이 취소되는 것을 확인할 수 있지만 devtools 콘솔에 "Error in fetch()" 오류가 발생하여 플래딩됩니다.선호하는/더 나은 방법이 있습니까?

여기서 fetch hook의 예:

async fetch () {
  await this.$store.dispatch('runs/getRunsOverview')
}

디스패치된 액션의 예:

export const actions = {
  async getRunsOverview ({ commit }) {
    const data = await this.$axios.$get('api/frontend/runs')
    commit('SET_RUNS', data)
  }
}

편집: fetch를 사용하고 있다는 것을 깜빡했습니다.fetchOnServer로 설정하다.False로딩 플레이스 홀더를 사용자에게 표시합니다.

메인 문제는 에러가 있는 플래딩 콘솔입니다만, 이 콘솔은 또한$fetchState.errormy template의 branch. 루트 전환 전에 "Something goen wrong" 텍스트와 함께 div가 표시됩니다.

편집 2: 이 에러의 발생원 및 믹스인 파일을 자세히 조사했습니다.fetch.client.js에.nuxt/mixins디렉토리로 이동합니다.아래 가져오기 함수 코드 붙여넣기:

async function $_fetch() {
  this.$nuxt.nbFetching++
  this.$fetchState.pending = true
  this.$fetchState.error = null
  this._hydrated = false
  let error = null
  const startTime = Date.now()

  try {
    await this.$options.fetch.call(this)
  } catch (err) {
    if (process.dev) {
      console.error('Error in fetch():', err)
    }
    error = normalizeError(err)
  }

  const delayLeft = this._fetchDelay - (Date.now() - startTime)
  if (delayLeft > 0) {
    await new Promise(resolve => setTimeout(resolve, delayLeft))
  }

  this.$fetchState.error = error
  this.$fetchState.pending = false
  this.$fetchState.timestamp = Date.now()

  this.$nextTick(() => this.$nuxt.nbFetching--)
}

댓글에 @kissu가 제안하는 대로 비동기/ait를 사용하여 모든 것을 얻으려고 노력했지만 운이 없었습니다:/

언급URL : https://stackoverflow.com/questions/67983526/canceling-request-of-nuxt-fetch-hook