GET error 400 bad request on second axios api call

Question

I'm trying to get data from an API using Axios. I have two API calls. The first call runs fine, and I get the data I expect. The second one, however, comes back with the 400 error bad request.

I've searched through multiple forums to try and find a solution, but I don't quite understand the code that I find.

    const [player, setPlayer] = useState([]);
    const [newPlayer, setNewPlayer] = useState([]);

    const FindLoadout = async () => {
        await axios.get(`http://api.paladins.com/paladinsapi.svc/getmatchidsbyqueueJson/${devId}/${generateSignature('getmatchidsbyqueue')}/${props.sess}/${moment.utc().format('YYYYMMDDHHmmss')}/428/${moment.utc().format('YYYYMMDD')}/-1,00`).then((response) => {
                const playerData = response.data;
                playerData.map((el) => {
                    player.push(el.Match)
                })
                console.log(player);
                for(let i = 0; i < 50; i++) {
                    newPlayer.push(player[i]);
                }
                console.log(newPlayer);
            }).catch((error) => {
                console.log(error);
            });
            axios.get(`http://api.paladins.com/paladinsapi.svc/getmatchdetailsbatchJson/${devId}/${generateSignature('getmatchdetailsbatch')}/${props.sess}/${moment.utc().format('YYYYMMDDHHmmss')}/${newPlayer.join(",")}`).then((response) => {
                console.log(response);
            }).catch((error) => {
                console.log(error);
            });
    }

The error message is:

Error: Request failed with status code 400 at createError (createError.js:17) at settle (settle.js:19) at XMLHttpRequest.handleLoad (xhr.js:60)

Code sample is incomplete: player and newPlayer aren't defined. — Brandon Hill
Not sure if it's the only issue here, since this is pretty API-specific and you've not included code for generateSignature etc., but you're not using the useState hook correctly. The second value it returns is how it's supposed to be updated, like: setPlayer(myUpdatedValue): reactjs.org/docs/hooks-state.html — Brandon Hill

Mathieu Mathieu · Accepted Answer · 2019-10-17T20:47:58

I don't know if it will exactly address your problem, but when using async / await for data fetching, a common practice is to do it more like this :

const FindLoadout = async () => {

  const playerData= await axios
    .get(`http://api.paladins.com/player/154`)
    .then(response => response.data);

  const gameData= await axios
    .get(`http://api.paladins.com/game/788`)
    .then(response => response.data);

  return {player: playerData, game: gamedata}
}

That is to say, you assign the data fetched by your API calls to variables, and then return the data that you need from them (after whatever manipulation you deem necessary).

The ability to write asynchronous code in that kind of synchronous syntax is one of the most appealing trait of async / await.

I suspect the errors you get are because you second call does not have the await keyword before it is fired.

EDIT : also, as other have remarked, you are definitely going to encounter issues with your incorrect use of hooks, but this is not the scope of the question.

GET error 400 bad request on second axios api call

3 Answers