I am trying to fetch user data using the GitHub API, but when I make a request using fetch() the request is not sent until after the return(). The response data will only show after the page loads, but I need it before render to use as HTML parameters. I know it has something to do with JSON requests being asynchronous, but I'm not sure how to change the code to set the data properly.
const user = params.get("user");
const [userData, setUserData] = useState(null);
const [reqLimit, setReqLimit] = useState(null);
const getUserData = () => {
fetch(`https://api.github.com/users/${user}`)
.then(response => {response.json();})
.then(json => console.log(json))//'undefined'
.then(json => setUserData(json))
.catch(error => {
console.error('Error:', error);
});
};
useMemo(() => {
fetch(`https://api.github.com/rate_limit`)
.then(response => response.json())
.then(json => {
setReqLimit(json.resources.core);
if (json.resources.core.remaining < 1) {
console.error('Error:', 40
}
});
getUserData();
}, [userData]);
return (
<main>
//userData = null; (Why?)
</main>
)
fetch(`https://api.github.com/users/${user}`)
.then(response => response.json();) // return json
//.then(json => console.log(json))//'undefined' remove this from here
.then(json => setUserData(json))
.catch(error => {
console.error('Error:', error);
});
There is such a method in a React application:
fetchData = async () => {
try {
const response = await fetch(`https://........`);
const data = (await response.json()).group;
this.setState({
data: data,
car: Object.keys(data)[0]
},this.filter);
} catch(err) {
console.log("404 Not Found");
}
};
How to write this part without async / await syntax, and using then and catch?
Just like this!
fetchData = () => {
fetch("YOUR_URL")
.then(response => response.json())
.then(json => json.group)
.then(data => {
this.setState({
data,
car: Object.keys(data)[0]
},this.filter);
})
.catch(err => {
console.log("404 Not Found");
});
}
It's simply-
fetchData = () => {
fetch(url)
.then(res => res.json())
.then(data => {
this.setState({data: data.group, car: Object.keys(data.group)[0]})
})
.catch(err => console.log(err));
};
If fetch returns a Promise you can:
fetchData = () => {
fetch(url)
.then(res => ... )
.catch(err => ...)
};
fetchData = () => {
return fetch(`https://........`)
.then(response => {
const data = response.json().group;
this.setState({
data: data,
car: Object.keys(data)[0]
},this.filter);
}).catch(err => {
console.log("404 Not Found");
});
};
response.json() won't return a Promise so you don't need await
I have the below code, where I have to get data from all the files in the same DB. Node.js is running at the backend. When I try the below code, I always get the last fetch, can anyone please help me how to fix this.
The below is from the react JS frontend.
componentDidMount() {
console.log("This Worked Sucessfully")
this.getDataFromDb();
if (!this.state.intervalIsSet) {
let interval = setInterval(this.getDataFromDb, 1000);
this.setState({ intervalIsSet: interval });
}
}
getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/passed')
.then(data => data.json())
.then(res => this.setState({ passed: res.data }));
};
getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/failed')
.then(data => data.json())
.then(res => this.setState({ failed: res.data }));
};
getDataFromDb = () => {fetch('http://172.24.78.202:3001/api/all')
.then(data => data.json())
.then(res => this.setState({ data2: res.data }));
};
render() {
const primaryColor = getColor('primary');
const secondaryColor = getColor('secondary');
const { passed, failed, data2 } = this.state
From what I see by your code, you seem to be re-writing your goGetDataFromDB two times. Try changing the names of each function or, the way you call them. You can also take advantage of Promise.all to group the results of each call into a single return handle.
Check this link for the documentation of Promise.all
You could refactor your current code to something like this:
class MyComponent extends React.Component {
componentDidMount() {
this.getDataFromDb();
if (!this.state.intervalIsSet) {
let interval = setInterval(this.getDataFromDb, 1000)
this.setState({intervalIsSet: true })
}
}
getDataFromDb = () => {
Promise.all([
'http://172.24.78.202:3001/api/passed',
'http://172.24.78.202:3001/api/failed',
'http://172.24.78.202:3001/api/all'
].map(url => (
fetch(url)
.then(data => data.json())
.then(res => res.data)
)
)).then(([passed, failed, data2]) =>
this.setState({ passed, failed, data2 })
);
}
render() {
//...
}
}
I tried to keep as much as your code as possible so you could notice the differences.
I hope this helps.
The following code fetches a json list and then does another fetch call for each list item to change their values. The problem is that it’s not done synchronously. “new” is printed to the console before “update”.
fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
console.log("old", data);
return data;
})
.then(data => {
data.forEach(function(e, index,array) {
fetch(API_URL_FOOD_DETAILS + e.foodid)
.then(response => response.json())
.then(data => {
array[index] = {...e, ...data};
console.log("update");
})
});
console.log("new", data)
});
Update
Here's how I incorporated #Andy's solution:
function fetchFoodDetails(id, index) {
return fetch(API_URL_FOOD_DETAILS + id)
.then(response => response.json())
.then(data => {
return [index, data];
});
}
function fetchDiary() {
return fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
return data;
})
}
(async () => {
const data = await fetchDiary();
console.log("old", JSON.stringify(data));
const promises = data.map((food, index) => fetchFoodDetails(food.id, index));
await Promise.all(promises).then(responses => {
responses.map(response => {
data[response[0]] = {...data[response[0]], ...response[1]};
console.log("update");
})
});
console.log('new', JSON.stringify(data));
})();
It was more difficult so I went with #connoraworden's solution. But I think it can be simplified.
Thanks for all your answers.
The best way to go about this is to use Promise.all() and map().
What map will do in this context return all the promises from fetch.
Then what will happen is await will make your code execution synchronous as it'll wait for all of the promise to be resolved before continuing to execute.
The problem with using forEach here is that it doesn't wait for asynchronous request to be completed before it moves onto the next item.
The code that you should be using here is:
fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
console.log("old", data);
return data;
})
.then(async data => {
await Promise.all(data.map((e, index, array) => {
return fetch(API_URL_FOOD_DETAILS + e.foodid)
.then(response => response.json())
.then(data => {
array[index] = {...e, ...data};
console.log("update");
})
}));
console.log("new", data)
});
You shouldn't be using forEach here. The best solution is to use Promise.all which waits for an array of promises (fetch is a promise) to all resolve, after which you can process the data.
Here I've created a dummy fetch function with some sample data to quickly show you how that works.
const dummyObj = {
main: [ { id: 1 }, { id: 2 }, { id: 5 } ],
other: {
1: 'data1',
2: 'data2',
3: 'data3',
4: 'data4',
5: 'data5',
6: 'data6',
7: 'data7',
}
}
// The summy function simply returns a subset of the sample
// data depending on the type and id params after 2 seconds
// to mimic an API call
function dummyFetch(type, id) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(id ? dummyObj[type][id] : dummyObj[type]);
}, 2000);
});
}
// In the first fetch we display the data, just
// like you did in your example
dummyFetch('main')
.then(data => {
console.log("old", data);
return data;
})
.then(data => {
// Instead of a forEach use Array.map to iterate over the
// data and create a new fetch for each
const promises = data.map(o => dummyFetch('other', o.id));
// You can then wait for all promises to be resolved
Promise.all(promises).then((data) => {
// Here you would iterate over the returned group data
// (as in your example)
// I'm just logging the new data as a string
console.log(JSON.stringify(data));
// And, finally, there's the new log at the end
console.log("new", data)
});
});
Here's the async/await version:
const dummyObj = {
main: [ { id: 1 }, { id: 2 }, { id: 5 } ],
other: {
1: 'data1',
2: 'data2',
3: 'data3',
4: 'data4',
5: 'data5',
6: 'data6',
7: 'data7',
}
}
function dummyFetch(type, id) {
return new Promise((resolve) => {
setTimeout(() => {
resolve(id ? dummyObj[type][id] : dummyObj[type]);
}, 2000);
});
}
(async () => {
const oldData = await dummyFetch('main');
console.log("old", oldData);
const promises = oldData.map(o => dummyFetch('other', o.id));
const newData = await Promise.all(promises);
console.log(JSON.stringify(newData));
console.log('new', newData);
})();
fetch is a Promise. This is asyncronous call, so the "new" console.log runs before finished all the promises. Use Promise.all() for that.
You can do this so:
fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
console.log("old", data);
return data;
})
.then(data => {
return Promise.all(data.map(food =>
fetch(API_URL_FOOD_DETAILS + food.foodid)
.then(resp => resp.json())
.then(json => {
// do some work with json
return json
})
))
})
.then(data => console.log('new', data))
Storing multiple responses in a single array
The following code fetches multiple keywords in queries and stores all the response of all three responses to the all array
let queries = ["food", "movies", "news"]
let all = []
queries.forEach((keyword)=>{
let [subres] = await Promise.all([fetch(`https://reddit.com/r/${keyword}/hot.json?limit=100`).then((response) => response.json())]);
all.push(subres)
})
//now you can use the data globally or use the data to fetch more data
console.log(all)
How to chain multiple fetch() promises?
You do it like how you have been doing it, just append another .then()
fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
console.log("old", data);
return data;
})
.then(data => {
data.forEach(function(e, index,array) {
fetch(API_URL_FOOD_DETAILS + e.foodid)
.then(response => response.json())
.then(data => {
array[index] = {...e, ...data};
console.log("update");
})
.then(()=>{
console.log("new", data)
})
});
});
If you want show only once "console.log("new", data)", you can check it with the index, like this:
fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
console.log("old", data);
return data;
})
.then(data => {
data.forEach(function(e, index,array) {
fetch(API_URL_FOOD_DETAILS + e.foodid)
.then(response => response.json())
.then(data => {
array[index] = {...e, ...data};
console.log("update");
if ((data.length - 1) === index) { // CHECK INDEX HERE IF IS THE LAST
console.log("new", data)
}
})
});
});
You will need a recursive function to do this.
fetch(API_URL_DIARY)
.then(response => response.json())
.then(data => {
console.log("old", data);
return data;
})
.then(data => {
recursiveFetch(data)
});
function recursiveFetch(initialData){
e = initialData[initialData.length-1]; //taking the last item in array
fetch(API_URL_FOOD_DETAILS + e.foodid)
.then(response => response.json())
.then(data => {
array[index] = {...e, ...data};
console.log("update");
initialData.pop() // removing last item from array, which is already processed
if(initialData.length > 0)
recursiveFetch(initialData)
})
}
Note: This is an untested code.
I have a situation where I make three fetch calls. Every fetch calls has a callback function which will update the respective property of state.twitterfeed object and finally setState. Issue is that it is calling the setState 3 times as of now. My aim is to use promise.all and update setStatus only once. I tried multiple times but its confusing and challenging.
Code:
this.state = {
twitterfeed: {
techcrunch: [],
laughingsquid: [],
appdirect: []
}
}
updateTwitterFeed = (data, user) => {
const twitterfeed = { ...this.state.twitterfeed
};
if (user === "appdirect") {
twitterfeed.appdirect = data;
} else if (user === "laughingsquid") {
twitterfeed.laughingsquid = data;
} else {
twitterfeed.techcrunch = data;
}
this.setState({
isloadcomplete: true,
twitterfeed
});
};
componentDidMount() {
fetch(
"http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=techcrunch"
)
.then(response => response.json())
.then(data => this.updateTwitterFeed(data, "techcrunch"));
fetch(
"http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"
)
.then(response => response.json())
.then(data => this.updateTwitterFeed(data, "laughingsquid"));
fetch(
"http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"
)
.then(response => response.json())
.then(data => this.updateTwitterFeed(data, "appdirect"));
}
You should have a look at the documentation: Promise.all()
Promise.all() actually preserves the order for its returned values.
Hence you could have:
const promises = [];
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count =30&screen_name=techcrunch"));
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid"));
promises.push(fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect"));
// Execute all promises
Promise.all(promises).then(values => {
console.log(values);
const twitterfeed = { ...this.state.twitterfeed};
twitterfeed.techcrunch = json.parse(values[0]);
twitterfeed.laughingsquid = json.parse(values[1]);
twitterfeed.appdirect = json.parse(values[2]);
this.setState({
isloadcomplete: true,
twitterfeed
});
});
If you are familiar with the axios library.You can use there axios.all([]) calling method. As mentioned in there docs :
function A() {
return axios.get(url,[config]);
}
function B() {
return axios.get(url,[config]);
}
axios.all([A(), B()])
.then(axios.spread(function (result_A, result_B) {
// Both requests are now complete and you can setSate here.
}));
Github : https://github.com/axios/axios
var promise1 = fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count =30&screen_name=techcrunch");
var promise2 = fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=laughingsquid");
var promise3 =fetch("http://localhost:7890/1.1/statuses/user_timeline.json?count=30&screen_name=appdirect");
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
//You can now extend it as you want