How i can await the result of the AsyncStorage? - reactjs

Question

i need to run the AsyncStorage first before run the other functions , but AsyncStorage take a time to run and it give the resutlt in the end of the code
constructor(props) {
super(props);
AsyncStorage.getItem(TOKEN).then((r) => {
console.log("AsyncStorage Function")
})
this.state = { token: null }
console.log("The last Function")
}

Answer 1

Ideally you shouldn't be performing any async tasks inside a constructor assuming this is a react class component.
So if you wish to perform any async tasks you could make use of componentDidMount from the component lifecycle method.
But in general if you want to wait for the async operation then this can be achieved in different ways
Using Promises
const promiseFun = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success")
}, 1000)
})
}
promiseFun().then((res) => {
//here res will be what is returned from the promise function
console.log(res);
//All the required things that needed to be perfomed after the async operation should be placed here.
});
//Whatever the actions/statements written here will be executed before the async operation is finished
console.log("Before Promise Returned");
Using async/await
const promiseFun = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success")
}, 1000)
})
}
const execFun = async() => {
let res = await promiseFun();
//All the statments from here will be executed only after the promise/async function returned.
console.log(res);
}
execFun();
//All the statements here will be executed without waiting for the promise/async function gets executed
console.log("Before Promise Returned");