GET error 400 неверный запрос на второй вызов API Axios

Question

Я пытаюсь получить данные из API, используя Axios. У меня есть два вызова 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);
            });
    }

Сообщение об ошибке:

Ошибка: не удалось выполнить запрос с кодом состояния 400 при createError (createError.js: 17) при урегулировании (bor.js: 19) в XMLHttpRequest. handleLoad (xhr.js: 60)

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 до его запуска.

РЕДАКТИРОВАТЬ: также, как отметили другие, вы определенно столкнетесь с проблемами из-за неправильного использования хуков, но это не в рамках вопроса.

Answer 2

Во-первых, вы смешиваете асинхронные и традиционные обещания

[ПРАВИТЬ: вы также изменяете состояние напрямую вместо использования setState]

[ПРАВКА2: состояние установки не является непосредственным для console.logof state (и запрос получения axios, основанный на значении состояния) непосредственно после setState обычно не регистрирует ожидаемое вами значение и поэтому должно быть включено в функцию обратного вызова, передаваемую в setState -или- useize useEffect при обновлении состояния]

[EDIT3: создать новое состояние вне цикла, затем setState after]

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

Если вы хотите использовать 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» возвращает правильное значение. Если это так, я бы проверил, чтобы newPlayer.join (",") возвращал правильное значение.