Skip to content

Commit 38d633a

Browse files
committed
docs: describe usage of multiple axios instances
1 parent a4cf976 commit 38d633a

File tree

1 file changed

+78
-3
lines changed

1 file changed

+78
-3
lines changed

README.md

Lines changed: 78 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
A small wrapper for integrating axios to Vuejs
1010

11-
## Why
11+
## Why
1212

1313
I created this library because, in the past, I needed a simple solution to migrate from `vue-resource` to `axios`.
1414

@@ -96,7 +96,7 @@ export default {
9696

9797
however, in composition API `setup` we can't use `this`, you should use `provide` API to share the globally instance properties first, then use `inject` API to inject `axios` to `setup`:
9898

99-
```js
99+
```ts
100100
// main.ts
101101
import { createApp } from 'vue'
102102
import App from './App.vue'
@@ -130,4 +130,79 @@ export default {
130130
}
131131
```
132132

133-
Please kindly check full documention of [axios](https://github.com/axios/axios) too
133+
Please kindly check full documentation of [axios](https://github.com/axios/axios) too
134+
135+
## Multiple axios instances support
136+
137+
The library allows to have different version of axios at the same time as well as change the default registration names (e.g. `axios` and `$http`). To use this feature you need to provide options like an object where:
138+
- `<key>` is registration name
139+
- `<value>` is instance of axios
140+
141+
For Vue it looks like this:
142+
```js
143+
// Vue 2 / Vue 3 + Composition API
144+
import App from './App.vue'
145+
import VueAxios from 'vue-axios'
146+
import axios from 'axios'
147+
import axios2 from 'axios'
148+
Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API
149+
150+
// usage
151+
export default {
152+
methods: {
153+
getList(){
154+
this.$myHttp.get(api).then((response) => {
155+
console.log(response.data)
156+
})
157+
this.axios2.get(api).then((response) => {
158+
console.log(response.data)
159+
})
160+
}
161+
}
162+
}
163+
```
164+
It works similarly in Options API of Vue 3 but if you want to use Composition API you should adjust your code a bit to extract proper keys, e.g.:
165+
```ts
166+
// Vue 2 + Setup function
167+
import { createApp } from 'vue'
168+
import App from './App.vue'
169+
import store from './store'
170+
import axios from 'axios'
171+
import VueAxios from 'vue-axios'
172+
173+
const app = createApp(App).use(store)
174+
app.use(VueAxios, { $myHttp: axios, axios2: axios2 })
175+
app.provide('$myHttp', app.config.globalProperties.$myHttp) // provide '$myHttp'
176+
app.provide('axios2', app.config.globalProperties.axios2) // provide 'axios2'
177+
app.mount('#app')
178+
179+
// App.vue
180+
import { inject } from 'vue'
181+
182+
export default {
183+
name: 'Comp',
184+
setup() {
185+
const $myHttp: any = inject('$myHttp') // inject $myHttp
186+
187+
const getListWithMyHttp = (): void => {
188+
$myHttp
189+
.get(api)
190+
.then((response: { data: any }) => {
191+
console.log(response.data)
192+
});
193+
};
194+
195+
const axios2: any = inject('axios2') // inject axios2
196+
const getListWithAxios2 = (): void => {
197+
axios2
198+
.get(api)
199+
.then((response: { data: any }) => {
200+
console.log(response.data)
201+
});
202+
};
203+
204+
205+
return { getListWithMyHttp, getListWithAxios2 }
206+
}
207+
}
208+
```

0 commit comments

Comments
 (0)