1

I have a Dialog object that will show, well, dialogs. There are many entry points to show dialogs, e.g. yesNo(), message(), confirm(), etc. However, all these methods basically call the same other method, called showSimpleDialog(title, message, buttons).

I'd like all these methods (showSimpleDialog too) to return a promise, but there's a snag:

yesNo() {
  return new Promise((resolve, reject) => {
    axios
      .get(......)
      .then(this.showSimpleDialog(...));
  }
}

As you can see, I am prevented in the above example from either returning the promise that showSimpleDialog would make or by passing the instanced Promise to showSimpleDialog.

The former is impossible because we're already in a different Promise by the time we have access to it. The latter because the Promise object itself is not yet available within the constructor. Well, technically, in this particular case it is (exactly because we're already in a different Promise), but some of my entry functions are synchronous, some asynchronous and I simply can't use the same code pattern to achieve the same effect in both cases.

I investigated the thing and I found this, but the author suggests the approach is flawed and archaic to begin with.

So, what would be the correct approach to return a functioning Promise from ALL entry points while the entry points would still be free to reusing each other's Promises?

velis
  • 8,747
  • 4
  • 44
  • 64
  • What does `this.showSimpleDialog(...)` do, what does it return? Notice that you must pass a *function* to `.then()`. – Bergi Dec 17 '21 at 08:08
  • Your code looks very much like the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it), except you don't even `resolve` the promise anywhere? – Bergi Dec 17 '21 at 08:08
  • What do you mean by "*a functioning Promise*" and by "*reusing each other's Promises*"? – Bergi Dec 17 '21 at 08:09
  • There's just no way I can award you guys for the clarity you've just given me. Sorry I can't upvote more and accept all the answers! :( – velis Dec 17 '21 at 08:19

2 Answers2

1

If I understand correctly, this.showSimpleDialog(...) also returns a Promise, right?

If you want yesNo() to return the Promise retunred by this.showSimpleDialog(...)

yesNo() { 
    return axios
        .get(......)
        .then(()=>{ 
            return this.showSimpleDialog(...);
        });
}

That being said, consider using async/await, especially when dealing with multiple sequential promises, if possible.

Ricky Mo
  • 6,285
  • 1
  • 14
  • 30
  • You understood correctly, but your answer seems hugely incorrect to me: your proposed `return` in the `then` handler of course is not the return statement of the yesNo method. As such it is useless for the purpose. AFAIU. – velis Dec 17 '21 at 08:03
  • 1
    @velis You misunderstand how promise chaining works. The returned promise (created by the `.then()` call) will resolve with the (promise) result returned by the callback, that is, the `showSimpleDialog()` result. It does work! Did you try it? – Bergi Dec 17 '21 at 08:07
  • 1
    @velis this is how promise works. You may read the documentation for [Promise chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises#chaining) – Ricky Mo Dec 17 '21 at 08:11
1

Your code is calling this.showSimpleDialog immediately (synchronously) without waiting for any promise to resolve (the axios one). This is because the code doesn't pass a function to the then method, but instead executes this.showSimpleDialog. This execution returns a promise (presumably), but then expects a function as argument, not a promise.

So you need to make sure to pass a callback to then, and let that callback return a promise. This way promises will be chained:

    .then(() => this.showSimpleDialog(...));

It is also important to make that callback an arrow function, since you'll be referencing this, which is intended to be the this on which yesNo is called.

trincot
  • 317,000
  • 35
  • 244
  • 286
  • Darn: I made a typo in the question :( Your analysis is correct. And that's not how my actual code is written :( – velis Dec 17 '21 at 08:12
  • 1
    That is why I would suggest you create a runnable snippet in your question, potentially with some dummy promise (for the axios part), but which we can run, and reproduces the issue. The editor toolbar has a button for you to insert such a snippet. But you need to prepare it well, so that it can run and preproduce the issue. – trincot Dec 17 '21 at 08:13