feat: allow creating new instances (#306)

Author: mercs600

docs/extend.md

@@ -32,3 +32,26 @@ export default function ({ $axios, redirect }) {
   })
 }
 ```
+
+### Create new axios instance based on defaults
+
+If you need to create your own axios instance which based on $axios defaults, you can use `create` method.
+
+```js
+export default function ({ $axios, redirect }, 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)
+}
+```

lib/plugin.js

@@ -1,4 +1,5 @@
 import Axios from 'axios'
+import defu from 'defu'
 <% if (options.retry) { %>import axiosRetry from 'axios-retry'<% } %>
 
 // Axios.prototype cannot be modified
@@ -34,6 +35,9 @@ const axiosExtra = {
   onError(fn) {
     this.onRequestError(fn)
     this.onResponseError(fn)
+  },
+  create(options) {
+    return createAxiosInstance(defu(options, this.defaults))
   }
 }
 
@@ -48,6 +52,24 @@ const extendAxiosInstance = axios => {
   }
 }
 
+const createAxiosInstance = axiosOptions => {
+  // Create new axios instance
+  const axios = Axios.create(axiosOptions)
+  axios.CancelToken = Axios.CancelToken
+  axios.isCancel = Axios.isCancel
+
+  // Extend axios proto
+  extendAxiosInstance(axios)
+
+  // Setup interceptors
+  <% if (options.debug) { %>setupDebugInterceptor(axios) <% } %>
+  <% if (options.credentials) { %>setupCredentialsInterceptor(axios)<% } %>
+  <% if (options.progress) { %>setupProgress(axios) <% } %>
+  <% if (options.retry) { %>axiosRetry(axios, <%= serialize(options.retry) %>)<% } %>
+
+  return axios
+}
+
 <% if (options.debug) { %>
 const log = (level, ...messages) => console[level]('[Axios]', ...messages)
 
@@ -91,7 +113,7 @@ const setupCredentialsInterceptor = axios => {
 }<% } %>
 
 <% if (options.progress) { %>
-const setupProgress = (axios, ctx) => {
+const setupProgress = (axios) => {
   if (process.server) {
     return
   }
@@ -182,19 +204,7 @@ export default (ctx, inject) => {
     axiosOptions.headers.common['accept-encoding'] = 'gzip, deflate'
   }
 
-  // Create new axios instance
-  const axios = Axios.create(axiosOptions)
-  axios.CancelToken = Axios.CancelToken
-  axios.isCancel = Axios.isCancel
-
-  // Extend axios proto
-  extendAxiosInstance(axios)
-
-  // Setup interceptors
-  <% if (options.debug) { %>setupDebugInterceptor(axios) <% } %>
-  <% if (options.credentials) { %>setupCredentialsInterceptor(axios)<% } %>
-  <% if (options.progress) { %>setupProgress(axios, ctx) <% } %>
-  <% if (options.retry) { %>axiosRetry(axios, <%= serialize(options.retry) %>)<% } %>
+  const axios = createAxiosInstance(axiosOptions)
 
   // Inject axios to the context as $axios
   ctx.$axios = axios

test/axios.test.js

@@ -54,6 +54,15 @@ const testSuite = () => {
     })
   })
 
+  test('createCopy', async () => {
+    const window = await nuxt.renderAndGetWindow(url('/mounted'))
+    window.onNuxtReady(() => {
+      const $axios = window.$nuxt.$axios
+      const newInstance = $axios.create()
+      expect(newInstance.defaults.xsrfHeaderName).toBe('X-CSRF-TOKEN')
+    })
+  })
+
   test('ssr', async () => {
     const makeReq = login => axios
       .get(url('/ssr' + (login ? '?login' : '')))

test/fixture/pages/ssr.vue

@@ -2,6 +2,8 @@
   <div>
     <div>session-{{ axiosSessionId }}</div>
     <div>encoding-${{ axiosEncoding }}$</div>
+    <div>newInstance session-{{ newInstanceSessionId }}</div>
+    <div>newInstance headers-{{ newInstanceHeaders }}</div>
   </div>
 </template>
 
@@ -14,11 +16,23 @@ export default {
     axiosSessionId () {
       return this.$axios.defaults.headers.common.SessionId
     },
-
     axiosEncoding () {
       return this.$axios.defaults.headers.common['accept-encoding']
+    },
+    newInstanceSessionId () {
+      return this.newInstance.defaults.headers.common.SessionId
+    },
+    newInstanceHeaders () {
+      return this.newInstance.defaults.headers
     }
   },
+  created () {
+    this.newInstance = this.$axios.create({
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+  },
   fetch ({ app, route }) {
     const doLogin = route.query.login !== undefined
     if (doLogin) {