React：为什么它会跳过我的“获取”function？

Question

I am a bit new to React and am trying to have data from MySQL print in my console, but it seems not to print what I want it to print.

 componentDidMount(){ console.log('Hi') fetch('http://localhost:6000/test').then((response) => response.json()).then((users) => console.log('This is your data')) console.log('Hi') }

Initially, I had ".then((users) => console.log('This is your data', users))", but because it didn't print out, I removed "users" to just test the string.

In my console, it prints Hi, a newline, and Hi again. Because it shows this, I'm assuming it skips over my fetch statement as it doesn't print "This is your data" either. Am I thinking the right way? Is there a reason "This is your data" doesn't print as well? Thanks for the help in advance!

Answer 1

It's isn't skipping over the fetch, this is just how asynchronous functions and Promises work in javascript.

fetch returns a promise and is asynchronous, so when execution is plowing through componentDidMount it does the first log, queues up the fetch (which resolves later), then does the second log. You'll see the final "this is your data" log when the fetch promise chain resolves.

If you want to really see the logs in order then you may want to use an async function.

async componentDidMount(){
  console.log('Hi')
  await fetch('http://localhost:6000/test') // <-- pause execution and wait for promise to resolve before continuing
    .then((response) => response.json())
    .then((users) => console.log('This is your data'))
  console.log('Hi')
}

Check if the fetch was successful and handle rejected Promises

async componentDidMount(){
  console.log('Hi')
  await fetch('http://localhost:6000/test')
    .then((response) => {
      if (!response.ok) { // <-- check the ok status
        throw new Error('Response not ok');
      }
      return response.json();
    })
    .then((users) => console.log('This is your data'))
    .catch(err => console.error(err)); // <-- log thrown errors
  console.log('Hi')
}