[Vuejs]-Is there a better way to wait for a user action when doing Async promises?

by

0👍

✅

After looking at the input I got from this question I solved it in the following way using the skeleton above as a template:


show() {
  //Insert Show PopUp code
  return new Promise((resolve) => {
      const responder = (bdy: Response) => {
        resolve(bdy);
      };
      resolve = responder;
    });
}

hide() {
  //Insert hide code
  resolve();
}

private resolve() : void
👤Jahson

2👍

As mentioned in the comments, the show() function should return a Promise, then listen for ‘click’ events. When the click is on the right element (close button, outside of the dialog), call the resolve function.

Pattern looks something like this:

function show() {

  // immediately return a Promise
  return new Promise((resolve) => {

    // click responder
    const responder = (evt)  => {
      let target = evt.target;

      // remove listener and resolve when a dialog-closing
      // element is clicked
      if (target === one_of_the_dialog_closing_elements) {
        document.removeEventListener('click', responder);
        resolve(target);
      }
    };

    // set up the click listener
    document.addEventListener("click", responder);
  });
}
👤terrymorse

1👍

A loop is a step in the wrong direction because it loads CPU. closed could be watched with $watch but it’s unknown if it’s reactive and this is also unnecessary.

The only ways closed is changed should be hide and show calls, then this can be solved like:

show() {
  if (this._resolvePopup)
    this._resolvePopup(); // handle multiple show() calls

  return new Promise(resolve => this._resolvePopup = resolve);
}

hide() {
  this.closed = true; // read-only in view
  if (this._resolvePopup) {
    this._resolvePopup();
    this._resolvePopup = null;
  }
}
👤Estus Flask

Leave a comment