How to pass dynamic parameters to axios instance

Question

I was just reading a css-tricks article on how to make you're API request DRY using axios HERE. Now reacting something like this would work fine :

export default axios.create({
  baseURL: 'https://mysite/v3',
  headers: {
    'content-type': 'application/json'
  }
})

The thing is what if i want to pass additional parameters to this instance ? I.E. i have another parameter that i would like to the header like so:

'X-USER-ACCESS-TOKEN': sessionToken,

Also what if i have multiple other options to pass to the header ?

Does this answer your question? [How to set header and options in axios?](https://stackoverflow.com/questions/45578844/how-to-set-header-and-options-in-axios) — , Jun 22 '20 at 11:30
@Dan not extactly , i need to pass the `X-USER-ACCESS-TOKEN': sessionToken,` dynamically — Alexander Solonik, Jun 22 '20 at 11:38

goto · Accepted Answer · 2020-11-03T13:47:16.920

To pass headers dynamically, you could export a function that takes options as an argument and returns a new instance of axios:

// utils/custom-axios.js

export default function(options = {}) {
  const { 
    headers = {} 
  } = options;
  
  return axios.create({
    baseURL: "https://mysite/v3",
    headers: {
      "Content-Type": "application/json",
      ...headers
    }
  });
}

Then you could use it the following way:

const axios = require("./utils/custom-axios");

const options = { 
  headers: { "X-USER-ACCESS-TOKEN": "secret" } 
};

axios(options)
  .post("./user.json", formData)
  .then(...)
  .catch(...);

// alternatively, don't pass any options 
axios()
  .post("./user.json", formData)
  .then(...)
  .catch(...);

this is more of what i was looking for , had tried something similar , let me try this and let you know — Alexander Solonik, Jun 22 '20 at 12:10

Benjamin Eckardt · Answer 2 · 2020-06-22T11:42:47.373

0

If I'm getting it right you want to pass headers for distinct calls instead of having them set for all requests using the base configuration?

What about axios.get('url', { headers: 'X-USER-ACCESS-TOKEN': sessionToken }) ?

edited Jun 22 '20 at 11:42

answered Jun 22 '20 at 11:28

Benjamin Eckardt

709
6
10

Hi thanks , this does't seem to work though , don't get any error in the console too. – Alexander Solonik Jun 22 '20 at 11:37
1

How do you determine that it does not work? Did you check the actual request that is sent? – Benjamin Eckardt Jun 22 '20 at 11:41

How to pass dynamic parameters to axios instance

2 Answers2