NuxtJS -管理多个axios实例
NuxtJS -管理多个axios实例
提问于 2021-05-27 16:29:35
我使用的是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中管理它？我看过代理选项，但我不认为这是我想要的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-27 18:52:06
nuxt/axios允许使用creating new Axios instances和$axios.create，这会将nuxt.config.js中的Axios配置考虑在内。
例如，您可以创建一个将新Axios实例injects到根上下文中的Nuxt plugin：
// ~/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(...)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67718493
复制相关文章
相似问题
腾讯云开发者
