Pass parameter/argument to axios interceptor
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.
Merge params
axios.interceptors.request.use((config) => {
config.params = {...config.params, my_variable: 'value'}
return config
})
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.
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
})
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
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);
});
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.
