在第二個 axios api 調用上獲取錯誤 400 錯誤請求

Question

我正在嘗試使用 Axios 從 API 獲取數據。 我有兩個 API 調用。 第一次通話運行良好，我得到了我期望的數據。 然而，第二個返回 400 錯誤錯誤請求。

我已經搜索了多個論壇以嘗試找到解決方案，但我不太了解我找到的代碼。

    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);
            });
    }

錯誤信息是：

錯誤：在 XMLHttpRequest.handleLoad (xhr.js:60) 的結算 (settle.js:19) 處的 createError (createError.js:17) 處的請求失敗，狀態碼為 400

Answer 1

我不知道它是否能完全解決您的問題，但是當使用async / await進行數據獲取時，通常的做法是更像這樣：

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}
}

也就是說，您將API 調用獲取的數據分配給變量，然后從它們返回您需要的數據（在您認為必要的任何操作之后）。

以這種同步語法編寫異步代碼的能力是async / await最吸引人的特性之一。

我懷疑您收到的錯誤是因為您的第二次調用在觸發之前沒有await關鍵字。

編輯：另外，正如其他人所說，你肯定會遇到不正確使用鈎子的問題，但這不是問題的 scope。

Answer 2

首先，您將異步和傳統承諾混合在一起

[編輯：您還直接改變 state 而不是使用 setState]

[EDIT2: setting state is not immediate therefor a console.log of state (and the axios get request relying on the state value) directly after a setState will not usually log the value you anticipate and therefore should be included inside the callback function passed to setState - 或 - 當 state 更新時使用 useEffect]

[EDIT3：在循環之外構建新的 state 然后在 setState 之后]

const [player, setPlayer] = useState([]);
const [newPlayer, setNewPlayer] = useState([]);
const FindLoadout = async () => {
    useEffect(()=>{
        if (!player.length) return
        const newState = [...newPlayer]
        for(let i = 0; i < 50; i++) {
            newState.push(player[i]);
        }
        setNewPlayer(newState)
    }, [player]);
    useEffect(() => {
        if (!newPlayer.length) return 
         axios
            .get(`http://api.paladins.com/paladinsapi.svc/getmatchdetailsbatchJson/${devId}/${generateSignature('getmatchdetailsbatch')}/${props.sess}/${moment.utc().format('YYYYMMDDHHmmss')}/${newPlayer.join(",")}`)
            .then((gameData)=>{
                console.log(gameData)
            }).catch((error)=>{
                console.error(error)
            })
    }, [newPlayer]);
    try {
        const playerData= 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`)
        const newState = [...player]
        playerData.map((el) => newState.push(el.Match))
        setPlayer(newState)
    }catch(error) {
        console.error(error);
    } 
}

如果您想在第二個 useEffect 中堅持使用 asyc，您也可以使用回調： https://dev.to/n1ru4l/homebrew-react-hooks-useasynceffect-or-how-to-handle-async-operations-with -useeffect-1fa8

useEffect(() => {
        if (!newPlayer.length) return
        const myCallback = async ()=>{
            try{
                const gameData = await axios.get(`http://api.paladins.com/paladinsapi.svc/getmatchdetailsbatchJson/${devId}/${generateSignature('getmatchdetailsbatch')}/${props.sess}/${moment.utc().format('YYYYMMDDHHmmss')}/${newPlayer.join(",")}`)
                console.log(gameData)
            }catch(error){
                console.error(error)
            }
        }
        myCallback()
}, [newPlayer]);

如果這不能解決問題：

400 Bad Request 錯誤是一個 HTTP 狀態代碼，這意味着您發送到網站服務器的請求不正確或已損壞，服務器無法理解。

即：您的 URL 對於 API 調用不正確 我會仔細檢查“generateSignature” function 是否返回正確的值。 如果是這種情況，我會檢查以確保 newPlayer.join(",") 返回正確的值。

Answer 3

我認為問題在於您如何為player和newPlayer分配值。 由於您使用的是useState掛鈎，因此您應該使用setPlayer和setNewPlayer 。

你能告訴我在第二次newPlayer調用之前 newPlayer 的值是多少嗎？

也許你可以像這樣更新它：

 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) //}) setPlayer(playerData.map(el) => el.Match); console.log(player); //for(let i = 0; i < 50; i++) { // newPlayer.push(player[i]); //} // I'm not sure how to update this assignment 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); }); }

關於更新newPlayer ：由於狀態是異步更新的，所以當您嘗試使用player中的值更新newPlayer時， player中沒有任何內容。

嘗試使用一些硬編碼值發出請求，以查看問題是否出在 api 請求或變量中的值上。