Best Way to Pass Query Parameters to URL Using Axios in Vue?

Question

What I am trying to accomplish is when the page first loads I will use Axios using the base URL to pull back a JSON object. I then want to add query parameters to the base URL when a button is clicked. So something along the lines of if the base URL is 'test.com' when the button is clicked a query parameter would be added to the URL and Axios would run again pulling back a different JSON object. So the URL could look something like 'test.com?posttype=new'.

What I am currently doing is on create run Axios with the base URL and when the button is clicked run a method that runs Axios again but this time it adds the query parameters to the URL so in Vue it looks like:

 created () {

    axios
      .get(this.jobsListURL)
      .then(response => (this.jobsList = response.data.data))
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)

    },

  methods: {
    getJobs: function () {

    axios
      .get(this.jobsListURL + '?' + this.AxiosParams)
      .then(response => (this.jobsList = response.data.data))

      .catch(error => {
        console.log(error)
        this.errored = true
      })

      .finally(() => this.loading = false)
  },

So in the above example jobsListURL is the base URL for the JSON object and AxiosParams is a method I am calling to add the parameters to the URL when the button is clicked. So when the button is clicked it is running the getJobs method to rerun Axios using the URL with the parameters. I am not sure if this is the best approach for this or if there is a better way of adding query parameters to the URL and grabbing the new JSON object this way.

Just looking for some feedback before I go to far down this route to see if there is a better approach for this?

Solution 1

You can use the second argument to .get if you want to pass an object instead:

axios.get(this.jobsListURL, {
  params: this.axiosParams
})

This is pretty much the same, but you don't have to do the string manipulation for the URL.

You can build that object like this:

computed: {
    axiosParams() {
        const params = new URLSearchParams();
        params.append('param1', 'value1');
        params.append('param2', 'value2');
        return params;
    }
}

Solution 2

if this.AxiosParams is a json object like { "posttype": "new" }, this will work:

axios.get(this.jobsListURL, this.AxiosParams)

But this doesn't work when the values are arrays, then you could add a paramsSerializer.

//import qs from 'qs'; (https://www.npmjs.com/package/qs)

this.http = axios.create({
    baseURL: `https://mydomain/api/v1/`,
    paramsSerializer: (params) => {
        return qs.stringify(params, {arrayFormat: 'repeat'});
    },
});
this.http.get('jobs', this.AxiosParams);

Comments

[George]

This is documented in the second GET request example here

[user9664977]

@Jeff Thanks! Looking at the documentation for some reason I must of missed that. I am going to go this route over what I started with.

[fedorqui]

The link @George provided back in Dec 2018 pointed to this version: github.com/axios/axios/blob/… However I still don't see such second GET request example

[George]

@fedorqui'SOstopharming' It's the second axios.get, or after the comment "// Optionally the request above could also be done as" and it's still the same today looking at the currect readme unless you mean the computed property, in which case it's just part of the javascrip webapi, pretty sure it could just be a plain object as I'd imagine axios encodes the values for you, but better to be safe then sorry!

[fedorqui]

@George oh yes I was referring to the second part of Jeff's excellent answer, where he mentions how to build the object (which is very useful if you are providing the same argument more than once and want to avoid the param[] thing and still get param; this is also explained in Multiple fields with same key in query params (axios request)?). Thanks for the update