NuxtJS - 管理多个 axios 实例

Question

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

在 VueJS / JS 经典中，我可以创建一个 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 允许 creating new Axios instances 和 $axios.create，这会将来自 nuxt.config.js 的 Axios 配置考虑在内。

例如，您可以在根上下文中创建一个Nuxt plugin injects 一个新的 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(...)
  }
}