使用 async/await 意外执行代码

Question

I am attempting to convert an array of localhost URLs to base64 strings.

    let uploadedBase64Images = [];
    for (let i = 0; i < urls.length; i++) {
      let img = await fetch(urls[i]);
      let imgBlob = await img.blob();
      let reader = new FileReader();
      
      let base64;
      reader.readAsDataURL(imgBlob);
      reader.onloadend = () => {
        console.log(reader.result)
        base64 = reader.result;
        console.log(base64)
        uploadedBase64Images.push(base64)
      };
    } 

    console.log(uploadedBase64Images)

One thing I noticed is that the console.log(uploadedBase64Images) always prints before console.log(base64) . This code block is wrapped in an async function as well. I've tried many other ways but at the end of the day, uploadedBase64Images is always empty.

When I move uploadedBase64Images.push(base64) outside of reader.onloadend , ie:

    reader.onloadend = () => {
        console.log(reader.result)
        base64 = reader.result;
        console.log(base64)
    };
    uploadedBase64Images.push(base64)

uploadedBase64Images is [undefined] , which leads me to believe that the Promise isn't being resolved?

I appreciate any help on this, thanks in advance!

Answer 1

From what i see, the problem is the reader.onloadend , it is in its own zone which is not following the async behaviour.

So, by wrapping the reader function to Promise to wait for its response before doing anything may solve your problem

// wrapping reader in Promise
const convertImageToBase64 = async(imgBlob) => {
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(imgBlob);
      reader.onloadend = () => {
        resolve(reader.result);
      };
      reader.onerror = reject
  })
}

const uploadedBase64Images = [];
for (let i = 0; i < urls.length; i++) {
  const img = await fetch(urls[i]);
  const imgBlob = await img.blob();
  const base64 = await convertImageToBase64(imgBlob)
  uploadedBase64Images.push(base64)
} 
console.log(uploadedBase64Images)