Menu
I would like to do the following and keep in mind it actually works for me. my question is what happens and Is possible to call async usrs() func from non async componentDidMount() func?
if it is not possible why it is working for me by calling this.usrs(usrs) instead of await this.usrs(usrs);
let outState = {};
class A extends Component{
componentDidMount(){
this.usrs(usrs);
}
getData(usr){
return db.collection('a/'+usr+'/bb').get().then(snap=>{
for(i = snap.docs.length-1; i>=0; i--){
outState[usr] = [...outState[usr], snap.docs[i].data()];
if(i === 0) return outState;
}
return false;
});
}
async usrs(usrs){
let os = {}, data = {};
for(i = usrs.length-1; i>=0; i--){
os = await this.getData(usrs[i]);
if(os){
data = { ...data, ...os };
if (i === 0) {
this.setState({ ...this.state, ...data });
}
}
}
}
}
452
What if we forget the await keyword ? If you forget to use await while calling an async function, the function starts executing. This means that await is not required for executing the function. The async function will return a promise, which you can use later.
Async/await does not do that. Nothing in Javascript does that. You always get a returned promise from an async function and no use of await inside that function changes that. Please read the details of my answer to understand better how the async function works.
You can use the await keyword on its own (outside of an async function) within a JavaScript module. This means modules, with child modules that use await , wait for the child module to execute before they themselves run. All while not blocking other child modules from loading.
Because async functions are Promises under the hood, we can run both asyncThing1() and asyncThing2() in parallel by calling them without await . Then we can use await and Promise. all , which returns an array of results once all Promises have completed.
You only need await if the caller needs to wait for the function to be done, for instance when it needs the result of the function, or when it needs to wait for some state/data change that the function causes. If there is no such dependency, you can just 'fire and forget', by not using the await keyword.
As others mentioned, you could use .then as well, but the basic rule is the same: you do that, when you have something specific to do after the function is done. It can be omitted otherwise.
So concretely: With 'caller', I simply mean the function that calls the async function. In your case that would be componentDidMount. The options are then quite simple:
usrs() will be run in the background completely and componentDidMount will continue running until its end.await, so componentDidMount will wait for the return of usrs().usrs().then(), so componentDidMount can continue, but the code specified in .then() is invoked after usrs() returns, if you need to do something that has to happen after usrs() is done.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
