Passing path parameters in axios

Question

I am using Axios with NodeJs and trying to pass path parameters in axios.get() method. For example, if URL is url = '/fetch/{date}', I want to replace {date} with the actual date while calling axios.get(url).

I went through the source code on Github and StackOverflow, but couldn't find any method.

Is it possible to keep URLs with parameters as a placeholder and replace them while actually calling the get method of Axios?

Answer 1

Axios doesn't have this feature and it looks like the team don't want to add it.

With credit to previous responders for inspiration, to me this seems like the solution closest to what you (and me) are looking for:

1 - Where you want to store all your URLs and their parameters, define them as functions which use a template string to return the composed URL:

export var fetchDateUrl = (date) => `/fetch/${date}`;

If you need any type-specific formatting of the value being concatenated into the URL, this function is a good place to do it.

2 - Where you want to make the request, call the function with the correct parameters:

import { fetchDateUrl } from 'my-urls';
axios.get(fetchDateUrl(someDateVariable))...;

Another variation, if you really like the idea of naming the parameters at the call site, you can define the URL function to destructure an object like this:

var fetchDateUrl = ({date}) => `/fetch/${date}`;

which you'd then use like this:

axios.get(fetchDateUrl({date: someDateVariable}));

Answer 2

I think using axios interceptors is better to do this :

//create your instance
const instanceAxios = axios.create({
  baseUrl: 'http://localhost:3001'
]);

instanceAxios.interceptors.request.use(config => {
    if (!config.url) {
        return config;
    }

    const currentUrl = new URL(config.url, config.baseURL);
    // parse pathName to implement variables
    Object.entries(config.urlParams || {}).forEach(([
        k,
        v,
    ]) => {
        currentUrl.pathname = currentUrl.pathname.replace(`:${k}`, encodeURIComponent(v));
    });

    const authPart = currentUrl.username && currentUrl.password ? `${currentUrl.username}:${currentUrl.password}` : '';
    return {
        ...config,
        baseURL: `${currentUrl.protocol}//${authPart}${currentUrl.host}`,
        url: currentUrl.pathname,
    };
});


// use like : 
instanceAxios.get('/issues/:uuid', {
   urlParams : {
       uuid: '123456789'
   }
})

For typescript users, you will need to add this, in one of your .d.ts

declare module 'axios' {
    interface AxiosRequestConfig {
        urlParams?: Record<string, string>;
    }
}

( this is a POC, not really tested, doesn't hesitate if you see something wrong )

Answer 3

Use template strings

    url = `/fetch/${date}`

Or just tag it on

    url = '/fetch/'+ date

Answer 4

You can use template strings ie:

let sellerId = 317737

function getSellerAnalyticsTotals() {
    return axios.get(`http://localhost:8000/api/v1/seller/${sellerId}/analytics`);
}

Answer 5

Given some API /fetch/${date} you likely want to wrap your axios call in a function.

const fetchData = (date) => axios.get(`/fetch/${date}`);

fetchData(dateObject.toFormat('yyyy-mm-dd'))
  .then(result => { ... });

This requires the calling code to format date correctly however. You can avoid this by using a DateTime library that handles date string parsing and do the format enforcement in the function.

const fetchData = (date) => axios.get(`/fetch/${date.toFormat('yyyy-mm-dd')}`);

fetchData(dateObject)
  .then(result => { ... });

Answer 6

you can do like this:

    getProduct = (id) => axios.get(`product/${id}`);

Answer 7

I always do it like this:

const res = await axios.get('https://localhost:3000/get', { params: { myParam: 123 } });

I find this to be much clearer than template strings.

More explanation here