Pass parameter/argument to axios interceptor

Question

How do I send custom parameters to the axios interceptor? I am using an interceptor like this:

window.axios.interceptors.request.use(function (config) {
    if (PASSED_PARAM == true) {
        doSomethingAwesome();
    }

    return config;
}, function (error) {    
    return Promise.reject(error);
});

I also have a response interceptor that needs to receive the same parameter.

Answer 1

Merge params

axios.interceptors.request.use((config) => {
  config.params = {...config.params, my_variable: 'value'}
  return config
})

Answer 2

The method suggested by @Laurent will cause axios to wipe out all your other parameters and replace it with my_variable, which is may not exactly what you want.

The proper way of adding default parameters instead of replacing it is like this:

axios.defaults.params = {};
axios.interceptors.request.use(function (config) {
    config.params['blah-defaut-param'] = 'blah-blah-default-value';
    return config;
}, function (error) {
    return Promise.reject(error);
});

This works with axios 0.18.1. It does not work with axios 0.19 due to a regression bug..., I believe it will be fixed soon.

Answer 3

The accepted answer, and the answers on this page seem to have missed what the question is asking.

This question is asking something like "When I call axios can I pass data to the interceptor but not to the server" and the answer is yes. Though it is undocumented and when using typescript you'll have to add a //@ts-ignore.

When you call axios you can pass a config object, (either after the url, or if you're not using a shortcut method like .get/.post the axios function just takes a config object. The good news is that config object is always passed along with the response so you can get to it in the interceptor and in the promise handers.

its available on the response objects as response.config and on the error as error.response.config

//@ts-ignore -- typescript will complain that your param isn't expected on the config object.
axios({
    method: "get",
    url: '/myapi/gocrazy',
    // just piggyback any data you want to the end of config, just don't
    // use any key's that axios is already expecting
    PASSED_PARAM: true
}

//in the interceptor, config is attached to the object, and it keeps any extra keys you tacked on the end.

window.axios.interceptors.request.use(function (config) {
   if (config.PASSED_PARAM == true) {
    doSomethingAwesome();
   }

   return config;
   }, function (error) {
   
   return Promise.reject(error);
});

window.axios.interceptors.response.use(function (response) {
   if (response.config.PASSED_PARAM == true) {
    doSomethingAwesome();
   }

   return response;
   }, function (error) {
   
   if (error.response.config.PASSED_PARAM == true) {
    doSomethingElseAwesome();
   }

   return Promise.reject(error);
});

Answer 4

Working solution

It's actually fairly simple to add parameters to the query with Axios interceptors when you send data.

axios.interceptors.request.use((config) => {
  config.params = {my_variable: 'value'}
  return config
})

Answer 5

axios allows to pass some additional request parameters:

axios.post('/api', `some body`,
    {headers: {'Content-Type': ' text/html;charset=UTF-8'},
    param: true});

and interceptor:

 this.axios.interceptors.request.use(req => {   
    console.log(`${req.method}: ${req.param}`); //output: `/api: true`
    return req;
    });

I have tested it on version: 0.21.1

Answer 6

I ended up using the headers object. Not sure if that is recommended, or if it's anti-pattern. But anyhow it works. I am not entirely sure about how many bytes the header adds to the server request head, but I think it's neglectable.

Answer 7

In addition to the answer from DiamondDrake, the global typings can be overridden to not have to 'ts-ignore' the usage:

declare module 'axios' {
    interface AxiosRequestConfig extends OriginalAxiosRequestConfig {
        PASSED_PARAM: boolean;
    }
}

Answer 8

You cannot pass param but you can update the passed param config. request interceptor logic runs before executing requests. It is kinda middlewares So maybe you need to access to tokens and update the request headers

axios.interceptors.request.use(
  (config) => {
    // or maybe you need to read the stored cookies
    const user = localStorage.getItem("user");   
    if (user) {
      // If user exists get the token
      const token = JSON.parse(user).token;
      // and then update the headers
      config.headers.Authorization = `Bearer ${token}`;
    }   
    // maybe u need to refresh the access tokens, you do it in interceptor
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

Answer 9

The answer of https://stackoverflow.com/users/12706095/zack is kinda correct.

You should create an axios.d.ts file including the following lines, the rest is done by TypeScript.

import "axios";

declare module "axios" {
    export interface AxiosRequestConfig {
        /** A custom axios request config param that can be used anywhere now. */
        myParam?: boolean;
     }
 }

Now TypeScript won't bother you anymore when you want to use this custom property anywhere when accessing the AxioRequestConfig, e.g. your interceptor.

See Axios typescript customize AxiosRequestConfig for more info.