javascript - How to clone an axios instance - Stack Overflow

admin管理员组

文章数量:1396114

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. ()

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.

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./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.

• javascript
• reactjs
• axios

Share Improve this question Follow edited Jan 31, 2022 at 6:50 Kislaya Mishra asked Jan 21, 2022 at 6:17 Kislaya MishraKislaya Mishra 14611 silver badge1111 bronze badges 2

• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Jan 30, 2022 at 20:16
• What have you tried and what isn't working? Code would help. If you're passing in headers correctly to an individual request it should not update the global headers, but its hard to tell till you provide some code. – Pure Function Commented Jan 30, 2022 at 20:19

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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.

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 mon base URL for all services in this module.
const httpPouic = http.create({
  baseURL: 'https://pouic./api'
});

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

    return pouics.data;
  }
};

Be careful, in case you use Axios with TypeScript, there's a known bug with the AxiosInstance type which doesn't reference the create method.

You can do it like this:

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

More you can read here:

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

本文标签： javascriptHow to clone an axios instanceStack Overflow