score:1

Accepted answer

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

Related Query

More Query from same tag