React Native wait for async func

Question

I wanna add multiple photo to db by Array.map() and after that add Array with url storage to collection.

I have problem with async function, because i should wait for this function await addImages() but something is not good.

    const addImages = async () => {
    image.map(async (imagePhoto)  => {
        const childPath = `post/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
        const response = await fetch(imagePhoto);
        const blob = await response.blob();
        const task = firebase
            .storage()
            .ref()
            .child(childPath)
            .put(blob);

        const taskProgress = snapshot => {
            console.log(`transferred: ${snapshot.bytesTransferred}`)
        }

        const taskCompleted = () => {
            task.snapshot.ref.getDownloadURL().then((snapshot) => {
                imageDB.push(snapshot)
            })
        }

        const taskError = snapshot => {
            console.log(snapshot)
        }

        task.on("state_changed", taskProgress, taskError, taskCompleted);

    })
    
}
const addToDbServices = async () => {
    await addImages();

    firebase.firestore().collection("services")
    .doc(firebase.auth().currentUser.uid)
    .collection("userServices")
    .add({
        nameService,
        errorCode,
        description,
        imageDB,
        status,
        creation: firebase.firestore.FieldValue.serverTimestamp()
    }).then(() => {
        Alert.alert('Serwis', 'Twoje zgłoszenie zostało pomyślnie dodane'),
        navigation.goBack()
    })
}

You need to return Promise's from your image.map function. Then you'll get an array of Promises, which you can wait for, using Promise.all — arminfro
– arminfro, Commented Jun 25, 2021 at 7:40

hendra · Accepted Answer · 2021-06-25 07:40:07Z

1

image.map(async (imagePhoto)  => {...})

This creates an array of promises. These are executed but not awaited by default, so code execution continues regardless whether the operations are finished or not. If you want to await all these promises you can use Promis.all() like that:

const addImages = async () => {
  const pendingOperations = image.map(async (imagePhoto)  => {...});
  // wait until all images are processed
  return Promise.all(pendingOperations); // or await Promise.all(pendingOperations);
}

const addToDbServices = async () => {
  await addImages();
  ...
}

answered Jun 25, 2021 at 7:40

hendra

2,6515 gold badges24 silver badges39 bronze badges

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

4 Comments

B Badaczewski Over a year ago

I tried like you wrote but i got the same result.

hendra Over a year ago

you just said "something is not good". What exactly is the problem?

B Badaczewski Over a year ago

task.snapshot.ref.getDownloadURL().then((snapshot) => { imageDB.push(snapshot) }) Here i pushed links to array "imageDB" after that i wanna add this array images link to db collection here

firebase.firestore().collection("services")         .doc(firebase.auth().currentUser.uid)         .collection("userServices")         .add({             nameService,             errorCode,             description,             imageDB,             status,             creation: firebase.firestore.FieldValue.serverTimestamp()         })

B Badaczewski Over a year ago

but addImages() func and firestore running in the same time. In result i get empty imageDB array

Collectives™ on Stack Overflow

React Native wait for async func

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related