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')
}
Source: stackoverflow.com
Related Query
- Why is arrow syntax preferred over function declaration for functional React components?
- React - useState - why setTimeout function does not have latest state value?
- React hooks: Why do several useState setters in an async function cause several rerenders?
- Why does react hook throw the act error when used with fetch api?
- Why we need to bind function in React Native?
- React - Fetch from external API function on button click
- Why is my axios get call repeating over and over using React.useEffect to fetch from Rails backend?
- Why React Function Component's "this" is undefined
- Why is a React Ref callback (as an arrow function or inline function) called multiple times on initial page load?
- Why is only the last item in a map function being changed in react app?
- Why is React.FunctionComponenent preferred over conventional function definitions?
- In React why does calling a function from another function in our code not work and display?
- Why does react call render function if I have not changed the reference of the state?
- How to fetch data without useEffect hooks in React function component?
- Why react calls function in subcomponents event when this subsomponents not rendered?
- React set-state doesn't update in fetch success function (on key up event)
- Why I'm able to use this.state without having to bind or use arrow function React
- Why can't a react stateless function return an array?
- Why are React Actions dispatched using a Return function
- Why does the render function in react is called twice when using the component strategy?
- React Hooks - Why array destructuring over object destructuring?
- React Webpack. Why do I get an error when calling a function from a child component?
- React Hooks: Why does the exhaustive-deps linter rule want a local function used in useMemo in the dependency list?
- React Fetch Google Cloud Function http cors req.method OPTIONS, POST
- Why do my fetch request causes an infinite error loop in ReactJs using React Toast Notifications
- Why is initial state being set over and over again in the "useState" hook of react
- Running setInterval() inside React function happens multiple times and increases the amount rapidly over time
- Why does the jest mock function not getting executed in my test with react testing library?
- Why does destructuring props in react with Typescript function require passing an object?
- Why do we need to return a function in the React Hook?
More Query from same tag
- Change file object to normal object in React
- how to aviod empty dynamic li in the react js
- React.js - Separate the JSON return with pagination
- Source of Img should be dynamic
- Rails custom route does not map correctly
- Update values inside array of objects using Hooks
- receiving data from api but cant setState
- Toggle issue with multiple section in React Js using Hooks
- How to align the legends in reactjs Highcharts
- find number of child divs which can fit into parent divs
- CSS file won't load in React JS
- Unable to get the value from object
- What is the preferred way to pass data from a Rails view to a react component in Rails 6?
- How to use Babylonjs in Reactjs Application?
- How to dismantle a component after hiding it?
- How to create a vertical divider in css?
- ClickAwayListener not working with Collapse or Fade transitions
- Prevent rerender of sibling component which initiates a useState in wrapper component
- Jest unable to recognize SVG component
- Chrome, Edge - Disable autofill / autocomplete for fields
- Passing data-id to bootstrap modal WITHOUT jquery
- Javascript click event listener with react function
- Updating model with GraphQL Mutation
- reactjs antd Autocomplete: Invalid values for props `$$typeof`, `type`
- React App + Node Gitlab cicd pipeline for GAE (Build and Deploy)
- ReferenceError: Cannot access 'players' before initialization
- Youtube video embed responsive size in flexbox row
- How to Auto Scroll to the Top when Alert is displayed
- setState being set to last element of array onClick regardless of element targeted
- How to check if http is in the string?