如何取消Nuxt fetch hook路由跳转请求并解决控制台报错问题

安全阿岳

2026-10-15

解决方案

核心原因

你遇到的问题本质是axios主动取消请求时会抛出一个特定的取消类型错误，这个错误没有被提前过滤，一路透传到Nuxt内置的fetch hook包装逻辑中，就会触发控制台报错和$fetchState.error赋值。

具体修改方案

方案1：全局axios拦截过滤取消错误（推荐）

直接在axios插件层统一处理所有取消请求的错误，无需修改现有业务代码，修改axios.js插件如下：

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

  // 新增错误拦截，过滤主动取消的请求错误
  $axios.onError(error => {
    if ($axios.isCancel(error)) {
      // 主动取消的请求直接返回成功状态，不抛出错误
      return Promise.resolve({ canceled: true })
    }
    // 其他业务错误正常抛出
    return Promise.reject(error)
  })
}

方案2：业务层单独捕获过滤

如果不想全局处理所有取消请求，也可以在对应的vuex action或者fetch hook里单独过滤取消错误：

修改vuex action示例：

export const actions = {
  async getRunsOverview ({ commit }) {
    try {
      const data = await this.$axios.$get('api/frontend/runs')
      commit('SET_RUNS', data)
    } catch (err) {
      // 仅非取消类型的错误才向外抛出
      if (!this.$axios.isCancel(err)) {
        throw err
      }
    }
  }
}

或者直接在fetch hook中捕获：

async fetch () {
  try {
    await this.$store.dispatch('runs/getRunsOverview')
  } catch (err) {
    if (!this.$axios.isCancel(err)) {
      throw err
    }
  }
}