237

I'm trying to send GET request as second parameter but it doesn't work while it does as url.

This works, $_GET['naam'] returns test:

export function saveScore(naam, score) {
  return function (dispatch) { 
    axios.get('http://****.nl/****/gebruikerOpslaan.php?naam=test')
      .then((response) => {
        dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data})
      })
      .catch((err) => {
        dispatch({type: "SAVE_SCORE_FAILURE", payload: err})
      })
  }
};

But when I try this, there is nothing in $_GET at all:

export function saveScore(naam, score) {
  return function (dispatch) { 
    axios.get('http://****.nl/****/gebruikerOpslaan.php',
    {
        password: 'pass',
        naam: naam,
        score: score
    })
      .then((response) => {
        dispatch({type: "SAVE_SCORE_SUCCESS", payload: response.data})
      })
      .catch((err) => {
        dispatch({type: "SAVE_SCORE_FAILURE", payload: err})
      })
  }
};

Why can't I do that? In the docs it clearly says it's possible. With $_POST it doesn't work either.

Sinan Samet
  • 6,432
  • 12
  • 50
  • 93

4 Answers4

518

axios.get accepts a request config as the second parameter (not query string params).

You can use the params config option to set query string params as follows:

axios.get('/api', {
  params: {
    foo: 'bar'
  }
});
Nick Uraltsev
  • 24,607
  • 4
  • 25
  • 14
  • 13
    How do I extract it on the server side? – Mustafa Mamun Jan 05 '17 at 10:02
  • 1
    @zero_cool you dont need to access params , here wrt example you can access "foo" and it will return "bar" – Ashutosh Raj Apr 27 '17 at 12:22
  • Extracting on server side is important point here, I am sure you can use string foo as parameter for your method on server side, but I am not sure how to grab all parameters at once as object inside your server side method. any clue? I am trying to get this help from this url https://stackoverflow.com/questions/55602990/reading-axios-get-params-in-asp-net-mvc-controller – Kurkula Apr 10 '19 at 01:14
  • axios.get('api?&foo=bar') || axios.get(api?&${param}=${value}) – king Feb 08 '21 at 02:27
163

On client:

axios.get('/api', {
  params: {
    foo: 'bar',
  },
});

On server:

function get(req, res, next) {
    
  let param = req.query.foo
  // ...
}
Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
danikoren
  • 4,191
  • 7
  • 34
  • 33
  • 2
    @danikorean, can we write the same client code without using request method alias, i.e. instead of `axios.get` using only `axios({url:"url_goes_here",data:{params:{foo:'bar'}})` – srbcheema1 Oct 21 '19 at 23:32
  • 2
    This server code saved me hours, thank you! For anyone wondering, stick with 'params' for the .get call, and not 'body' as you may have seen while searching around. You can re-name it anything on the server side if you wish, but keep params for the client get. – DORRITO Jan 17 '20 at 15:44
  • `axios.get('/api', { params})` !== `axios.get('/api', params)` – xgqfrms Mar 11 '20 at 10:13
  • Why is it that it is `params` on client, but `query` on server? – Sir hennihau Oct 14 '20 at 18:50
  • This saved me a lot of time, Static: axios.get('api?&foo=bar') || Dynamic: axios.get(`api?&${param}=${value}`) – king Feb 08 '21 at 02:25
  • Thanks a lot. I was working almost for 2 hours to extract the parameter value. Thanks again. – Tareq May 13 '21 at 19:41
  • @Sirhennihau because `params` on client will be attached as `query` to the `url`. – Adam Orłowski Aug 12 '21 at 20:38
  • @AdamOrłowski If the `req.query` on the server is initialized with the `params` from the client side, how does the `req.body` on the server get initialized with from the client side? – CRoemheld Nov 20 '21 at 16:37
0

For me I was trying to send params using axios.post.

When switch both client and server to axios.get, req.query.foo worked like a charm

cormacncheese
  • 1,251
  • 1
  • 13
  • 27
-1

This works fine for me. When it is post request nested data object isn't needed but in get requests, in order to send data, you need it.

axios.get('/api', {
    data: {
        foo: 'bar'
    }
}