JS Promise wait for nested asynchronous function

Question

I'm having an issue getting 2 asynchronous operations properly timed so the outer function waits for the inner function to finish before continuing. The solution I'm trying to implement is based on an existing solution which uses ES2015, so I can't use await and have to work with Promises.

The solution is split in multiple classes, which for an easy overview I call Main, Invoker and Inner. So the Main class uses an instance of the Invoker to asynchronously execute a command from the Inner class and should then wait for the response, which works but it doesn't wait for the asynchronous Image.onload() from the setSize() of the Inner class.

class Inner extends Component{
    setSize(size){
        const newImage = { url: null, imageName: canvasImage.imageName};
        
        ... some stuff...
        const tempImage = new Image();
        tempImage.src = canvas.toDataURL();
        tempImage.onload = function(){
        
            ... some stuff...
            const tempCanvas = document.createElement("canvas");
            const tempCtx = tempCanvas.getContext("2d");
            tempCtx.drawImage(image, x, y, xa, ya);

            newImage.url = tempCanvas.toDataURL();
        }
        return Promise.resolve(newImage);
    }
}


class Main{
    resize(size){
        imageData = this.execute(commandName,'setSize', size);
        
        imageData.then(image => {
            ... do stuff with image data...
        });
    }
    execute(commandName, ...args) {
        return this._invoker.execute(commandName, ...args);
    }
}

class Invoker{
    execute(...args) {

        let [command] = args;
        if (isString(command)) {
          command = commandFactory.create(...args);
        }

        return this._invokeExecution(command).then((value) => {
          this.clearRedoStack();

          return value;
        });
    }
}

I already tried to move the "return Promise.resolve(newImage) in the setSize Function inside the onload function, but then I'm getting an error in the invoker, because of the missing resolve. Any ideas?

You need to use new Promise, not Promise.resolve, to create a promise that is fulfilled from the onload callback. — Bergi
– Bergi, Commented Mar 29, 2021 at 22:09

oieduardorabelo · Accepted Answer · 2021-03-29 22:16:37Z

since the setSize function is using a callback based syntax with onload, you need to wait until the onload function is called by the browser,

you can return a promise from setSize and handle onload for resolve and onerror for reject, something like:

setSize(size){
    return new Promise((res, rej) => {
      const newImage = { url: null, imageName: canvasImage.imageName};
      
      ... some stuff...
      const tempImage = new Image();
      tempImage.src = canvas.toDataURL();
      tempImage.onload = function(){
      
          ... some stuff...
          const tempCanvas = document.createElement("canvas");
          const tempCtx = tempCanvas.getContext("2d");
          tempCtx.drawImage(image, x, y, xa, ya);

          newImage.url = tempCanvas.toDataURL();
          res(newImage);
      }
      tempImage.onerror = function(error) {
        rej(error)
      }
    })
}

Clem · Accepted Answer · 2021-03-29 22:16:05Z

3

You need to return a promise and resolve it in the onload.

setSize () {
  return new Promise((resolve, reject) => {
    ...
    tempImage.onload = function () {
      ...
      resolve(newimage)
    }
  })
}

answered Mar 29, 2021 at 22:16

Clem

2,33218 silver badges20 bronze badges

1 Comment

Andreas Over a year ago

Thank you! Your answer and the one from oieduardorabelo helped!

Collectives™ on Stack Overflow

JS Promise wait for nested asynchronous function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related