Блог

Главная - Вопросы по программированию - Почему компонент react не улавливает ошибку axios

Почему компонент react не улавливает ошибку axios

#javascript #reactjs #axios

Вопрос:

У меня есть следующий код на python с использованием flask

 @bp.route("/test", methods=["GET"])
def test():
    
    throw_error = True
    if throw_error : 
        return jsonify(message="Throwing an error"), 405
    
    return jsonify(message="Test message"), 200

в React у меня есть настройка контекста со следующей функцией

 function testRequest(){
    const response = axios.get('/api/test')
    console.log(response)

}

Я вызываю эту функцию по нажатию кнопки в другом компоненте с помощью

 async function handleButtonClick(e){
  e.preventDefault();
  try{
    await testRequest(); 

   }catch(error) { // DOESN'T EXECUTE??
    console.error("Error occured")
    setError("Error occurred in test method")
   }
}

Почему ошибка try не улавливает ошибку 405?

Ответ №1:

Вы можете только с пользой ждать обещания. testRequest не возвращает обещания.

Он запускает axios.get , назначает обещание response , регистрирует его, а затем возвращает undefined .

Это try/catch совсем не касается обещания.

Вы могли бы исправить это с помощью:

 function testRequest(){
    const response_promise = axios.get('/api/test')
    console.log(response_promise)
    return response_promise;
}

Таким образом, обещание выполняется await внутри try/catch .

Ответ №2:

С приведенными ниже изменениями в вашей функции вы сможете поймать ошибку.

  async function testRequest() {
    const response = await axios.get('http://localhost:1337/sample/test');
    return response;
  }
 

 async function handleButtonClick(e:any) {
    e.preventDefault();
    try {
      await testRequest();

    } catch (error) { // DOESN'T EXECUTE??
      console.error("Error occured")
      console.log(error.mes);
    }
  }
Метки: