0

It seems that the following example works both with async await like this:

import { db } from '../firebase'; const onAdd = async () => { await db.collection('FlashCards').add({ originalText: newOriginalText, translatedText: newTranslatedText, }); }; 

And without async await like this:

import { db } from '../firebase'; const onAdd = () => { db.collection('FlashCards').add({ originalText: newOriginalText, translatedText: newTranslatedText, }); }; 

Does it make any difference which one I use? Does using async await improve anything in this example?

2
  • Is there any condition where you need to wait for onAdd to finish? Commented Jun 18, 2020 at 11:55
  • Does db.collection('FlashCards').add(...) return a promise? Do you want the code following onAdd() to "wait" for the operation to be completely done? Commented Jun 18, 2020 at 11:55

3 Answers 3

1

I would suggest using the first snippet. It does have an advantage - you can wait for the onAdd to finish if you wish. With the second example, you can execute it and the code would work - an insertion would be made, however you cannot wait for the completion.

Here is a simple example:

//simple delayed operation - prints a message after 2 seconds async function delayedOperation(msg) { return new Promise(resolve => { setTimeout(() => { console.log("complete:", msg); resolve(); }, 2000); }); } //awaiting the operation async function withAwait() { await delayedOperation("with await"); } //not awaiting the operation function withoutAwait() { delayedOperation("without await"); } async function main() { console.log("before calling withAwait()"); await withAwait(); console.log("after calling withAwait()"); console.log("before calling withoutAwait()"); await withoutAwait(); console.log("after calling withoutAwait()"); } main();

As you can see, the withoutAwait cannot itself be awaited. The problem is that it doesn't produce a promise, main() completes before the delayed operation in withoutAwait() finishes.

You can always have the await in the function but not use it, if it's not needed:

async function delayedOperation(msg) { return new Promise(resolve => { setTimeout(() => { console.log("complete:", msg); resolve(); }, 2000); }); } async function withAwait() { await delayedOperation("with await"); } async function main() { console.log("before calling withAwait()"); //not awaiting because we don't care whether it finishes before proceeding withAwait(); console.log("after calling withAwait()"); } main();

However, it's a good idea to check if the operation is completed, otherwise you cannot respond to errors or may not even know they happened:

//WILL FAIL! async function delayedOperation(msg) { return new Promise((resolve, reject) => { setTimeout(() => { reject(`problem when doing [${msg}]`); }, 2000); }); } async function withAwait() { await delayedOperation("with await"); } async function main() { console.log("before calling withAwait() and handling the error"); try { await withAwait(); } catch(e) { console.error(e); } console.log("after calling withAwait() and handling the error"); console.log("before calling withAwait() - no handling"); //not awaiting because we don't care whether it finishes before proceeding withAwait(); console.log("after calling withAwait() - no handling"); } main();

And a note, adding async but not await will not allow you to correctly await the result of the function.

async function delayedOperation(msg) { return new Promise(resolve => { setTimeout(() => { console.log("complete:", msg); resolve(); }, 2000); }); } // async function but not awaiting the operation async function withoutAwait() { delayedOperation("without await"); } async function main() { console.log("before calling withoutAwait()"); //attempting to await the completion await withoutAwait(); console.log("after calling withoutAwait()"); } main();

Since the body of the withoutAwait() doesn't have an await then it completes as soon as delayedOperation() returns a promise, rather than when that promise settles.

Sign up to request clarification or add additional context in comments.

Comments

1

It depends which behavior do you expect.
As mentioned in Firebase documentation, .add(...) method is async. https://firebase.google.com/docs/firestore/manage-data/add-data#add_a_document

Await/Async functions ensure you storage execution is complete.
If you do not need to ensure data is stored in your DB after onAdd function call, you can do without async.

Comments

1

Async/Await will ensure that your process will execute synchronously. so until finishing the onAdd() execution rest of the code will not be process. though it is depending on your context whether it is need or not.

but as per your context, i think Async/Await will be best.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.