Overview

I am working in a react app using redux. I have an action that checks wether or not we have new image data. If so, it will upload it, receive the new URL and then use this data to update the object.

Problem

However, the order of operations within my function are working as expected, however code outside the function runs before it is completed.

Question

Why is my console log at the bottom executing before the contents of my async function are completed?

if(imageData) {
      const imageGUID = guid();
      const storageRef = projectStorage.ref(`${imageData.name}_${imageGUID}`);
      // This function should complete before the console log at the bottom is called.
      await storageRef.put(imageData).on('state_changed', snap => {
        }, async (err) => {
          console.log(err)
          toastr.error("Uh Oh!", `Could not upload image`);
        }, async () => {
          imageURL = await storageRef.getDownloadURL();
          console.log("NEW IMAGE URL: ", imageURL);
          
      })
    }
    console.log("Done setting up new image: ", imageURL) // This is called before we get the IMAGE URL from Firestore.... why?

CodePudding user response：

The .on function does not return a Promise so there is nothing to wait for the await. You have to convert the event base API of put to a Promise.

if (imageData) {
  const imageGUID = guid();
  const storageRef = projectStorage.ref(`${imageData.name}_${imageGUID}`);
  // This function should complete before the console log at the bottom is called.
  try {
    await new Promise((resolve, reject) => {
      storageRef.put(imageData)
        .on('state_changed', snap => {},
          reject, resolve)
    })

    imageURL = await storageRef.getDownloadURL();
    console.log("NEW IMAGE URL: ", imageURL);
  } catch (err) {
    console.log(err)
    toastr.error("Uh Oh!", `Could not upload image`);
  }
}
console.log("Done setting up new image: ", imageURL)

CodePudding user response：

storageRef.put(imageData).on - doesn't look like promise (you upload your image in callback), so await doesn't make sense

If you want to use promises, you should write it something like that

 await new Promise((resolve, reject) => {
      storageRef
        .put(imageData)
        .on('state_changed', snap => {
        }, async (err) => {
          console.log(err);
          toastr.error('Uh Oh!', `Could not upload image`);
          reject()
        }, async () => {
          imageURL = await storageRef.getDownloadURL();
          console.log('NEW IMAGE URL: ', imageURL);
          resolve()
        });
    })