Chaining promises

function firstPromiseFunction(string) {
  return new Promise((resolve, reject) => {
  if (string === "myName") {
    resolve("Yay it u")
  } else {
    reject("Boo it not u")
    }
  })
}

function secondPromiseFunction(string) {
  return new Promise((resolve, reject) => {
  if (string === "Yay it u") {
    resolve("Working")
  } else {
    reject("Broken")
    }
  })
}

firstPromiseFunction("myName")
  .then((firstResolveVal) => {
    return secondPromiseFunction(firstResolveVal);
  })
  .then((secondResolveVal) => {
    console.log(secondResolveVal);
});

firstPromiseFunction("myName")
  .then(secondPromiseFunction)
  .then((secondResolveVal) => {
    console.log(secondResolveVal);
});

Hi guys!

The exercise says that I should use the syntax I used with the first invocation of firstPromiseFunction (using an anonymous function with “return”).

However, the syntax I used with the second invocation produces the same output and is easier to read/understand.

Are there circumstances where using the anonymous function and “return” will produce a different output? If so, why?

Thanks

From what I can tell you are correct - there is no difference except making it more compact.
However, this article I found says that this is not the generally accepted practice.

This reason makes sense to me and is probably why the lesson teaches to use the return structure.

The exercise says:

" In order for our chain to work properly, we had to return the promise secondPromiseFunction(firstResolveVal) . This ensured that the return value of the first .then() was our second promise rather than the default return of a new promise with the same settled value as the initial."

I was under the impression that .then will invoke it’s argument with the resolved value of the promise preceding it and return the value of that invoked function (and will only return the default promise handed to it if it has no “resolve” function as an argmuent, which in my example it does). If that’s the case, both chunks of code are functionally identical. The above paragraph implies that is not the case though.

Ah I see.
That makes sense because the firstResolveVal is not being used with the secondPromiseFunction.

I didn’t understand this either so I modified the code to add console.logs to understand better what is going on:

  .then((firstResolveVal) => {
  	console.log(secondPromiseFunction(firstResolveVal));
    return secondPromiseFunction(firstResolveVal);
  })
  .then((secondResolveVal) => {
    console.log('first call' + secondResolveVal);
});

firstPromiseFunction("myName")
  .then(console.log(secondPromiseFunction))
  .then((secondResolveVal) => {
    console.log(secondResolveVal);
});

This line console.log(secondPromiseFunction(firstResolveVal)); returns [object Promise]. This is what I would expect.

The line .then(console.log(secondPromiseFunction)) returns

function secondPromiseFunction(string) {
return new Promise((resolve, reject) => {
if (string === “Yay it u”) {
resolve(“Working”)
} else {
reject(“Broken”)
}
})
}

So it is not returning a promise but the actual code of secondPromiseFunction.

This is why it doesn’t work even when it seems to.
Does this make sense to you?