I struggle to find a way of having a guarantee that I have the right data after some async functions are called. I have a list of elements with an async onclick handler for each element. I have a slider which opens when an element is clicked and is populated asynchronously with some data.
const onClickElement = async () => {
// open slider
// await fetch data to display
}
On slider close I have some async functionality to delete the data from the slider.
const onSliderClose = aync () => {
// await async clear data 1
// await async clear data 2
}
If I click close slider and immediately after, I click another element to reopen the slider,the new data is fetched before the slider onSliderClose handler finishes. The on close slider functionality resumes and is clearing all the previoualy fetched data. I am using react and redux for data storing. Thanks!
Use await with async!
const onClickElement = async () => {
// open slider
// fetch data to display
await fetchData()
}
Or alternative
const onClickElement = async () => {
// open slider
// fetch data to display
}
onClickElement.then( () => {
//Do what you have to do here
})