Async and Await not working with Axios React

Question

I am trying to test my react project locally with my computer and with my phone. I am using JavaScript not TypeScript. When I run the project on my computer everything works fine, but when I try to load it on my phone, I get an error: Unhandled Rejection (TypeError): undefined is not an object (evaluating 'scheduleArr.forEach'). I thought I was using async and await correctly because this code workes on my computer. I'm confused as to why this code works on one platform but not the other.

async function getSchedule() {
  let scheduleArr = await axios.get('api/schedule/')
    .then(response => { 
      return response.data; 
     })
    .catch((error) => {
       console.log(`ERROR: ${error}`);
    });

  scheduleArr.forEach(game => {
    /* do stuff */
  }

});

I think this problem is directly related to async and await because when I comment out this function, my project loads correctly on my phone.

Can anyone help me understand what I'm doing wrong?

when using async and await you need try and catch blocks and not then and catch methods — Sysix
– Sysix, Commented Feb 6, 2021 at 22:06
Is your phone on the same network as your computer? Or are you using your mobile data network? — codemonkey
– codemonkey, Commented Feb 6, 2021 at 22:15
@codemonkey my phone is on the same network. When I tested the style of my app without any logic, it rendered correctly. — Chase
– Chase, Commented Feb 6, 2021 at 22:22
@Sysix Can you explain this a little bit more? When I change my .then .catch to try catch I get an error on both devices. — Chase
– Chase, Commented Feb 6, 2021 at 22:24
The point is that your axios request obviously bombs on your phone and the try catch thing will help identify the specific error. — codemonkey
– codemonkey, Commented Feb 6, 2021 at 22:29

Quentin Grisel · Accepted Answer · 2021-02-06 22:26:37Z

1

You can't use the async/await pattern with then. Either use it like :

async function getSchedule() {
    try {
      let scheduleArr = await axios.get("api/schedule/");
      console.log(scheduleArr.data);
    } catch (err) {
      console.log(`ERROR: ${err}`);
    }

    scheduleArr.forEach(game => {
      /* do stuff */
    });
  }

Or with the default pattern :

function getSchedule() {
    axios
      .get("api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

Note that I moved your foreach loop into the then. It is asynchronous and therefore need to be triggered only when you get the result of your api call.

answered Feb 6, 2021 at 22:26

Quentin Grisel

5,0171 gold badge13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chase Over a year ago

This didn't solve my problem, but I think this is better coding practice

codemonkey Over a year ago

@Chase This answer is not meant to actually solve your problem. It will simply help troubleshoot the origins of it.

Quentin Grisel Over a year ago

@Chase undefined is not an object (evaluating 'scheduleArr.forEach') You get this error because you are trying to loop over schedulArr when it is not initialized. As I said, you need to put it inside your then. Now, if it still does not works, share more of your code so we can check it out please.

Chase · Accepted Answer · 2021-02-06 23:04:45Z

I figured out what the issue was. It had nothing to do with async await or axios.

This was my code before

function getSchedule() {
    axios
      .get("http://localhost:5000/api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

I changed my API call to use my actual local IP instead of localhost

function getSchedule() {
    axios
      .get("http://192.168.X.XX:5000/api/schedule/")
      .then(response => {
        let scheduleArr = response.data;

        // Do this inside the 'then'
        scheduleArr.forEach(game => {
          /* do stuff */
        });
      })
      .catch(error => {
        console.log(`ERROR: ${error}`);
      });
  }

Nesting my code in the .then block did fix my undefined error even with the bad url. Thank you for that suggestion @Quentin Grisel.

Fixing my url let me test it on different devices.

Collectives™ on Stack Overflow

Async and Await not working with Axios React

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related