Nuxt插件配置axios全请求全局加载时this报错如何解决

数据老陈

2026-8-28

问题原因

Nuxt 执行插件函数时不会绑定this上下文，同时你写的请求/错误回调是箭头函数，本身也不持有this对象，因此直接访问this会抛出未定义错误。
插件函数的第一个解构参数已经包含了你需要的所有上下文实例，不需要通过this.$nuxt逐层获取实例。
另外你原来的代码只在请求报错时关闭加载效果，缺少请求成功后的关闭逻辑，会导致请求正常返回后加载动画一直驻留。

修正代码

直接从上下文中解构出的app（根Vue实例）上调用$loading方法即可，补全响应成功的回调逻辑：

// plugins/axios.js
export default function ({ app, $axios, redirect, store }, inject) {
  $axios.onRequest(config => {
    app.$loading.start()
    // 必须返回config，否则请求配置会丢失
    return config
  })

  // 新增：请求正常返回时关闭loading
  $axios.onResponse(response => {
    app.$loading.finish()
    return response
  })

  $axios.onError(error => {
    app.$loading.finish()
    // 必须抛出错误，否则业务层捕获不到请求异常
    return Promise.reject(error)
  })
}

并发场景优化

如果页面存在同时发起多个axios请求的场景，上面的写法会出现第一个请求返回就提前关闭loading的问题，可以通过请求计数器优化逻辑：

// plugins/axios.js
export default function ({ app, $axios, redirect, store }, inject) {
  let requestCount = 0

  const showLoading = () => {
    if (requestCount === 0) app.$loading.start()
    requestCount++
  }

  const hideLoading = () => {
    requestCount--
    if (requestCount <= 0) {
      requestCount = 0
      app.$loading.finish()
    }
  }

  $axios.onRequest(config => {
    showLoading()
    return config
  })

  $axios.onResponse(response => {
    hideLoading()
    return response
  })

  $axios.onError(error => {
    hideLoading()
    return Promise.reject(error)
  })
}

注意事项