Hard time understanding difference between Promise.resolve() and promise chain

Question

I have some hard time understanding what is the difference between using Promise.resolve() and simple using the promise.

The explanation seems a bit hard to get so i have a little example:

For example, i have a method that return a promise like this:

requestPokemon() {
  return new Promise((resolve, reject) => {
    axios.get("https://pokeapi.co/api/v2/pokemon/1").then(value => {
      resolve(value);
    })
    .catch(error => {
      reject(error);
    })
  });
}

so, now i can call this method and chain the promise, i figure two ways of do it, and can't get it when Promise.resolve is better or not, my issue is understanding that.

so i solved it in two ways:

first:

Promise.resolve(this.requestPokemon()).then(value => {
  this.pokemon = value.data.name;
}).catch(error => {
  console.log(error);
})

second:

this.requestPokemon().then(value => {
  this.pokemon = value.data.name;
}).catch(error => {
  console.log(error);
})

please i need a little explanation of the downsides and upsides on doing it one way above the other, i appreciate the help a lot.

Thanks

Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, May 05 '18 at 08:37
You only need the `Promise.resolve` when you don't know whether `this.requestPokemon()` will return a promise, and you want to `.then()` nonetheless — Bergi, May 05 '18 at 08:38

Jonas Wilms · Answer 1 · 2018-05-05T08:24:02.033

3

At first you dont need to construct a promise (thats an antipattern) in your requestPromise, just return the one from axios:

  requestPokemon() {
    return axios.get("https://pokeapi.co/api/v2/pokemon/1");
 }

Now lets have a look at this line:

 Promise.resolve(this.requestPokemon()).then(/*...*/)

It will create a new promise, that resolves or rejects when the axios promise resolves or rejects and adds a then handler to it. So it will be chained like this like this:

 resolve() -> Promise (axios) -> Promise (Promise.resolve) -> then
 reject() -> Promise (axios) -> Promise (Promise.resolve) -> catch

So as you can see Promise.resolve just passes through the data, so actually it is superflous. We actually just need:

 resolve() -> Promise (axios) -> then
 reject() -> Promise (axios) -> catch

Which can be done with:

 this.requestPokemon().then(/*...*/, /*...*/);

please i need a little explanation of the downsides and upsides on doing it one way above the other

Adding Promise.resolve is just a bit more typing and makes it less readable, there is no syntactical difference.

edited May 05 '18 at 08:24

answered May 05 '18 at 08:17

Jonas Wilms

132,000
20
149
151

so the call using the Promise constructor is almost never done? just in api calls isn't that the case? – af costa May 05 '18 at 08:33
if i do Promise.resolve i can return the promise and chain it with then and catch, but that is strange to me since i called Promise.resolve() i assume that the promise will be resolved and not fail? – af costa May 05 '18 at 08:34
@af yes, you just need `new Promise` if you want to wrap a callback. And no, if you resolve to a promise (with `resolve(promise)` or `Promise.resolve(promise)`) it will be flattened, so tue outer promise will do what the inner one does. – Jonas Wilms May 05 '18 at 09:41
got it, thank you, another thing that confuses me is Promise.resolve and Promise.reject, if i call one of them for example Promise.resolve the parameter that i pass in the resolve, for example a promise should always be resolved? without errors? – af costa May 05 '18 at 10:55
@af if it is not a promise then yes. – Jonas Wilms May 05 '18 at 19:56

Hard time understanding difference between Promise.resolve() and promise chain

1 Answers1