CODEWITHSUNDEEP
javascriptreactjsaxios
qBoss
qBoss

Reputation: 63

Why isn't react component catching axios error

I have the following code on python using 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

on React I have a context setup with the following function

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

}

I'm calling this function on a button click in another component by

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

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

Why isn't the try catch, catching the 405 error?

Upvotes: 3

Views: 51

Answers (2)

Vivek
Vivek

Reputation: 104

With below modification to your function, you will be able to catch error.

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

Upvotes: 0

Quentin
Quentin

Reputation: 944443

You can only usefully await a promise. testRequest doesn't return a promise.

It triggers axios.get, assigns the promise to response, logs it, then returns undefined.

The try/catch doesn't touch the promise at all.

You could fix that with:

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

So the promise is being awaited inside the try/catch.

Upvotes: 1

Related Questions