JS Promise：调用一个 function 在 resolve 中有一个 return 语句

Question

I have a function responsible for uploading images to remote storage.

I also have another function that creates a user in a DB. During the user creation, I should upload the image, get back the URL of the uploaded image, and add it to the user object before adding it to the database. However, I am stuck at getting back the urls:

My function that uploads images:

export const writePicture = (picture) => {
    if (picture !== undefined) {

       //code to upload image to database (...)

                .then((url) => {
                    console.log(`finished executing writePicture, url: ${url}`) //all good here, url is console logged.
                    return url;
                });
        });
    } else {
        console.log("finished executing writePicture")
        return ""
    };
}

The above function is exported to another file where I use promises. My promises are currently set as follows:

//pictureLogo and pictureImage are existing image objects

const waitForLogoUrl = new Promise((resolve, reject) => {
  resolve(writePicture(pictureLogo));
});

const waitForImageUrl = new Promise((resolve, reject) => {
  resolve(writePicture(pictureImage));
});

Promise.all([waitForLogoUrl, waitForImageUrl]).then((urls) => {
  //urls should be an array containing the urls from first and second promise
  console.log("the urls are:");
  console.log(urls);
});

The above is not working as expected. Inside urls , I am getting an array of two undefined entries instead of the two obtained urls.

writePicture() is working fine, it is uploading the pictures and console logging the urls. However the urls are being console logged after the Promise.all has finished:

https://imgur.com/lvP7rrg

I am new to using promises so I am probably missing something about how to call a function inside a resolve. Any help is appreciated.

Answer 1

Usually when new Promise appears in code, it's a red flag, and this is no exception. Below I assume you cannot use async/await, and it only corrects 2 things:

1. Return promises from writePicture
2. Don't unnecessarily wrap its result in another promise.

export const writePicture = (picture) => {
    if (picture !== undefined) {
      return codeToUploadImage(...)   // Return is critical here
         .then((url) => {
            console.log(`finished executing writePicture, url: ${url}`) //all good here, url is console logged.
            return url;
         });
    } else {
        console.log("finished executing writePicture")
        return ""
    };
}


//pictureLogo and pictureImage are existing image objects

const waitForLogoUrl = writePicture(pictureLogo);
const waitForImageUrl = writePicture(pictureImage);

Promise.all([waitForLogoUrl, waitForImageUrl]).then((urls) => {
  //urls should be an array containing the urls from first and second promise
  console.log("the urls are:");
  console.log(urls);
})