NuxtJS - 管理多个 axios 实例

Question

我使用 NuxtJS 2，并且需要有 2 个或更多具有不同配置的 axios 实例。

在 VueJS / JS classic 中，我可以创建一个新实例axios：

var axiosElasticSearch = axios.create({
  baseURL: 'https://elastic.com/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

但在 Nuxt 中，由于 SSR 层，他们应用自己的配置来处理这个问题。

在我的 Nuxt 配置中，我有这个：

axios: {
    baseUrl: process.env.API_URL,
    browserBaseUrl: process.env.BROWSER_API_URL,
    withCredentials: true,
    headers: {
      common: {
        Accept: 'application/json',
        Authorization: 'Bearer ' + process.env.API_TOKEN
      }
    }
  },

然后，我可以轻松地注射它。

可以在 Nuxt 中管理吗？我查看了代理选项，但我认为这不是我想要的。

Answer 1

nuxt/axios允许使用来创建新的 Axios 实例$axios.create，这会将 Axios 配置nuxt.config.js考虑在内。

例如，您可以创建一个Nuxt 插件，将新的 Axios 实例注入根上下文中：

// ~/plugin/api.js
export default function ({ $axios }, inject) {
  // Create a custom axios instance
  const api = $axios.create({
    headers: {
      common: {
        Accept: 'text/plain, */*'
      }
    }
  })

  // Set baseURL to something different
  api.setBaseURL('https://my_api.com')

  // Inject to context as $api
  inject('api', api)
}

并配置您的 Nuxt 应用程序以使用它：

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

然后你的组件可以使用新的 Axios 实例：

// MyComponent.vue
export default {
  fetch() {
    this.$api.get(...)
  },
  asyncData({ $api }) {
    $api.get(...)
  }
}