Axios-module: How to set query params and message body?

[Flur3x]

Hey,

I've tried to figure out how to send payload like query params and message body, like I was used with the original Axios library. There I could just add a second argument (payload) in the method call.

Am I overseeing something? I'm quite sure I'am. Thanks for your help and for this module. :)

Best,
Daniel

_{This question is available on Nuxt.js community (#c85)}

[pi0]

Hey. Exactly with this module's plugin you can use the same functions of original axios library to make requests:

const { data } = await this.$axios.post(endpoint, { data: {  }, query: {  } })

We also provide some optional helpers with exactly same params as original axios but they directly return data. So no destructuring like { data } is needed. This may make your code more readable.

const foobar = await this.$axios.$post(endpoint, { data: {  }, query: {  } })

[Flur3x]

Thanks! I just found the actual issue. Nuxt-Axios didn't like that some endpoints already included a query param (eg. "?foo=bar") in their url. Axios itself just appends the additional query params, but Nuxt-Axios expects that the url itself doesn't contain any query.

For my case it's no big deal, but maybe you want to adjust that in a future release. :)

[pi0]

@Flur3x Thanks for your reports. Would you please provide some example to reproduce that error? (Also do you mean with original axios, baseURL can contain query params??)

[Flur3x]

No, I don't mean the baseURL, but the url path. As an example, let's say I have the following call:

const params = {
    articleNumber: this.articleNumber,
};

const response = await axios.$get('/api/slider?mode=bestseller', { params });

Axios sets both query params, but Nuxt-Axios only sets mode and throws away articleNumber. I have to use the regular approach to make it work:

const params = {
    articleNumber: this.articleNumber,
    mode: 'bestseller',
};

const response = await axios.$get('/api/slider', { params });

[pi0]

Axios sets both query params

Somehow impossible if this module has a different behavior than original axios.

https://github.com/nuxt-community/axios-module/blob/caa7b9659f36c31e801a64c6e0653e8965a7d1d2/lib/plugin.template.js#L39

Will keep this issue open until make sure about it. And make any fix if possible.

[Flur3x]

Okay, thanks. I also tried it without the wrapper (get() instead of $get()) with the same result.

[christopherdupont]

Any news about this issue ? I have the same problem.

[gomezmark]

Hi,
Somebody could help me

Im newbie on nuxt and im dealing with axios.
Im posting a request on axios

let data = { name :. "test" }

axios.post(url, data, {
headers : {
'Content-type' : 'application/form-url-encode'
}
}).then(...)

But on request, im passing a json stringify.
Is there a file on nuxt that should be edited?

Thanks

[SamiUrias]

I am not sure if this is the correct answer but this is how I make it work for me.
I am using PHP as backend.

 let objectToSend = {
                somekey: "lorem ipsum"
            }
let propertiesResponse = await app.$axios.get('http://localhost/folder/file.php', { params: objectToSend })
            .then(response =>{ return response; }).catch(()=>{console.log('Something went wrong!')});

If I do that, using '_params_' , I mean putting my object into another object with params, I can read that object using $_GET in the backend

I hope this information helps someone :D

[SacDin]

Same issue. Second argument object with params not working with $axios.$get. Please mark this as a bug.

[tavaresrenan]

So, it's not possible in Axios. Or change your API to use req.query ou change your front to use http

[nitin466]

No, I don't mean the baseURL, but the url path. As an example, let's say I have the following call:

const params = {
  articleNumber: this.articleNumber,
};

const response = await axios.$get('/api/slider?mode=bestseller', { params });

Axios sets both query params, but Nuxt-Axios only sets mode and throws away articleNumber. I have to use the regular approach to make it work:

const params = {
  articleNumber: this.articleNumber,
  mode: 'bestseller',
};

const response = await axios.$get('/api/slider', { params });

Can we also use this to send formData (any file to upload) here along with query params. As per my limited knowledge, formData goes as separate object and below syntax is not not working for me
const response = await axios.$get('/api/slider', { {data: myFile}, { query: params} });
above line is sending query params successfully but myFile is not getting saved.

[Nurkasym]

@pi0 Hi! Why POST request to api not sent data(body)?
my code:

this.$axios.$post("http://localhost:5000/api/Offers/UpdateMessage", { headers: { 'X-Auth-Token':${this.$store.getters['auth/checkToken']}, 'Content-Type': 'application/json' }, data: JSON.stringify(body) }).then((response) => { console.log(response); })

[zgualberto]

Hey. Exactly with this module's plugin you can use the same functions of original axios library to make requests:

const { data } = await this.$axios.post(endpoint, { data: {  }, query: {  } })

We also provide some optional helpers with exactly same params as original axios but they directly return data. So no destructuring like { data } is needed. This may make your code more readable.

const foobar = await this.$axios.$post(endpoint, { data: {  }, query: {  } })

Hi man, Can this be done with authentication? The credentials are on env file. I'm using SSR nuxt. Excuse my bad english.

[CarlosDanielDev]

const response = await axios.post(
  endpoint,
  {
    // request body
    name: "aaa"
  },
  {
    query: {
      page: 1
    },
    params: {
      id: 1
    }
  }
);

[20-07]

axios.get (url, {

        headers: headers, 
        params: params

}).then......