可观察到的诺言嵌套在诺言中

Question

I'm in a scenario where I have a promise inside a promise . However when calling .then on the containing promise I'm getting the result of my inner promise. Which is great, but I don't understand why it works. Why can I do this:

    this.dataService.init().then(d => console.log(d));

instead of this:

    this.dataService.init().then(p => p.then(d => console.log(d));

dataservice

  init(){
    return this.geo.init().then( p => this.get(p.lat, p.lon));
  }

  get(lat, lon){
    let uri = `${this.baseuri}lat=${lat}&lon=${lon}&appid=${this.appid}`
   //this returns a promise
    return this.http.get(uri).toPromise()
      .then(d => d.json() || {}); 
  }

geolocation service

  init(){
    return new Promise( this.getGeolocation );
  }

Answer 1

When you return a promise from inside a .then() handler, the outer promise and the inner promise become chained together. The outer promise will then get its value from the inner promise and the outer promise will not call it's .then() handlers until the inner promise is resolved.

This is a very powerful and intentional feature of promises. It allows you to very easily sequence async operations and know what the eventual and final result is.

A promise never resolves with a value that is another promise. When it detects that you returned a promise from a .then() handler, it just chains to that promise and uses that new promise's value as the eventual value for the parent promise.

In fact, you can't even purposely make a promise be the resolved value from within a .then() handler. In rare cases where you want a resolved value to be a promise, you have to wrap it in an object (to hide it) and resolve with the non-promise object as the resolved value.

So, in this line:

return this.geo.init().then( p => this.get(p.lat, p.lon));

Here's the sequence of operations:

1. Call this.geo.init() . That returns a promise, we will call p1 .
2. Call .then() on that promise and pass it a callback. This registers the .then() callback handler to be called later with the previous promise resolves. It also returns a new promise which is what is returned from your function. We will call this promise p2 . This is one of the keys that allows this to work.
3. Now p1 resolves eventually. This calls the .then() handler callback registered on it. This calls this.get(...) which returns another promise p3 which is returned from inside this .then() handler as the return value.
4. The promise infrastructure sees that you returned a promise from the .then() handler so it links p2 to p3 and p2 does not get resolved until p3 does and when p3 does finally get resolved, p2 uses its resolved value. The key that makes this work is that p1 is long since resolved, but p1.then() returned a new promise p2 which is what your top level function returned. And p2 gets chained to p3 so p2 does not resolve until p2 does and p2 gets its resolved value from p3 .

FYI, you can chain to any arbitrary depth.

Answer 2

The dataService.init function returns a promise. When you invoke a function that returns a promise, the parameter that is passed to .then() is what you get AFTER the promise has resolved. A promise cannot resolve and return ANOTHER promise to its .then callback. It must wait until the inner promise resolves first.

this.dataService.init().then(d => console.log(d));

When your callback receives d , both promises have already resolved, and d is a value, NOT a promise. Therefore it doesn't make sense to call .then() on it again.

Essentially, you can nest functions that return promises as much as you like . When you call the outermost function, it will wait until all the promises have resolved before returning the final value.

For instance:

const getXhrResult = () => axios.get('/some-url') // returns a promise

const func1 = () => getXhrResult().then((res) => {
  console.log('Got the result')
  return result * 2 // also returns a promise
}

const func2 = () => func1().then(console.log)

func2() // logs the result * 2.