如何在Nuxt中配置@nuxt/axios全局参数 避免接口请求代码重复？

完全可以全局配置，不需要在每个请求里重复写配置，常用的有两种配置方式：

方式1：通过nuxt.config.js配置固定通用属性 #

适合不需要动态逻辑的基础配置，比如基础路径、固定请求头、超时时间等，配置示例：

// nuxt.config.js
export default {
  // 首先确保已经注册@nuxtjs/axios模块
  modules: [
    '@nuxtjs/axios',
  ],
  // 全局axios配置项
  axios: {
    // 全局接口基础路径
    baseURL: process.env.API_BASE_URL || 'http://localhost:3000/api',
    // 全局请求超时时间
    timeout: 10000,
    // 全局默认请求头
    headers: {
      // common代表所有请求方法都生效
      common: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      // 也可以单独给指定请求方法设置头，比如仅POST请求生效
      // post: {
      //   'Content-Type': 'application/x-www-form-urlencoded'
      // }
    }
  }
}

方式2：通过自定义axios插件实现动态配置 #

如果需要加动态逻辑，比如从登录态中取token拼接Authorization头、统一处理请求错误，就用插件方式配置：

1. 先在nuxt.config.js中注册插件

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/axios.js'
  ]
}

2. 新建plugins/axios.js文件，编写全局拦截逻辑

// plugins/axios.js
export default function ({ $axios, store, redirect }) {
  // 全局请求拦截器：请求发送前统一修改配置
  $axios.onRequest(config => {
    // 从store取登录token，加到所有请求的头信息里
    const token = store.state.user?.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  })

  // 全局响应拦截器：统一处理接口返回错误
  $axios.onError(error => {
    const statusCode = error.response?.status
    // 401未授权统一跳转登录页
    if (statusCode === 401) {
      redirect('/login')
    }
    return Promise.reject(error)
  })
}

注意事项 #

• 两种方式可以搭配使用，固定配置放配置文件，动态逻辑放插件
• 配置优先级：单请求自定义配置 > 插件配置 > nuxt.config.js全局配置

内容的提问来源于stack exchange，提问作者Atif Zia