如何克隆 axios 实例

Question

I have a global axios instance which I use across my application. I want to update headers locally for a particular request. But the headers update is updating the global defaults. I wanted to understand the best way of doing this. Currently I am hacking my way into resetting the headers. Also toyed around with the idea of deep cloning the global axios instance. It just feels like an important feature to have, but couldn't find anything the docs, except for a github issues talking about sub-instances. ( https://github.com/axios/axios/issues/1170 )

EDIT: sorry for not providing code. This is my setup to give an idea: Following is my global axiosClient(in file apiClient.js ), with some interceptors added(not shown in code).

const axiosClient = axios.create({
baseURL,
headers: {
Authorization: <bearer_token>,
'Content-Type': 'application/json',
.
 }
});

In my modules, I import the same client to make api requests as such:

import axiosClient from '../apiClient';

export function someRequest({ file }) {
  let formData = new FormData();
  formData.append('file', file);
  const initHeader = axiosClient.defaults.headers['Content-Type'];
  axiosClient.defaults.headers['Content-Type'] = 'multipart/form-data'; // I want to make this change only for the local instance
  const request = axiosClient.post('parse-rebalance-data', formData);
  axiosClient.defaults.headers['Content-Type'] = initHeader; //I have to reset the changes I made to the axiosClient
  return request;
}

Now my question again is,(1) do I need to do it in this hacky way, or(2) should I look into deep cloning a local copy, or(3) is there a documented way to doing it which I am missing.

Answer 1

All that Axios instances do, is set default values for the configuration. You can, however pass any other configuration to each call by using the config parameter, as you would with the global Axios:

import axiosClient from '../apiClient';

export function someRequest({ file }) {
  let formData = new FormData();
  formData.append('file', file);
  return axiosClient.post('parse-rebalance-data', formData, {headers: {'Content-Type': 'multipart/form-data'}});
}

The headers specified in the config argument are merged with those in the defaults.

Answer 2

You can do it like this:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

More you can read here:

https://axios-http.com/docs/instance

Answer 3

You can actually create an instance from another instance.

So for example you could have:

// src/services/http.js

import axios from 'axios';

const http = axios.create({
  headers: {
    Accept: 'application/json'
  },
  withCredentials: true
});

export default http;

And then where you need a more specific instance:

// src/services/pouic.js

import http from './services/http';

// Defines common base URL for all services in this module.
const httpPouic = http.create({
  baseURL: 'https://pouic.com/api'
});

export default {
  getPouic: async function () {
    const pouics = await httpPouic({
      method: 'get'
      url: '/pouic-list'
    });

    return pouics.data;
  }
};