Promise inside promise: what's the correct way

Question

I've a function like this:

function top() {

  //promise1
  ParentPromise({
    ...some code here...
  }).then(function() {


    //promise2
        ChildPromise({
          ..some code here...
        }).then(function(response) {
         var result = response.result.items;

        });

});

};

and i need to return result value in this way:

var myresult = start();

How i can do that? THX

Answer 1

Not quite sure if this would work with native JS promises, but in PromiseKit (swift.. i know, but i'm pretty sure this should work) i'm used to returning the second promise, and chain it like this:

function top() {
  //promise1
  return ParentPromise({
    ...some code here...
  }).then(function() {
    //promise2
    return ChildPromise({
          ..some code here...
    })
  }).then(function(response) {
    var result = response.result.items;
    // do something with `result`

    return result;
  });
}

top().then(function(result){
  // all done 
});

Or in ES6 / lambda notation;

function top() {
  return ParentPromise().then(_ => {
    return ChildPromise()
  }).then(response => {
    return response.result.items
  })
}

top().then(items => {
  // all done 
})

Answer 2

The challenge here is that you're trying to use asynchronous code in a synchronous way. You will need to change the way you think when working with asynchronous code.

One way to solve this is by having top() return ParentPromise, and then set the variable myresult using the .then() of the return of that promise.

function top() {
  ...
  return ParentPromie;
}
var myresult = ''; // default value until you have resolved your promise
top().then(result => myresult = result);

However, for this to work, you'll need to add code to resolve your promise:

var ParentPromise = new Promise(function(resolve) { 
  ... some code...
  var ChildPromise = new Promise(function(){
    ...some code...
  }).then(function(response){
    resolve(response.result.items);
  });
});

Answer 3

Run the following code, expanding to fit your specific circumstances. Note how it illustrates returning Promises, adding logic at various points along the way, before, during and after handling various pending logic.

function ParentPromise(){
  // add complexity here, always returning a promise(s)
  // ie Promise.all, new Promise, Promise.reject or whatever...
  // here for simplicity, just return one to resolve with a clear value
  // to see it at the other end
  return Promise.resolve({items:1234});
}
function start() {
  // any method that returns the first promise, kicking off the complexity
  return ParentPromise(/*
    infinitely complex promise-conflation (individual or Promise.all, etc)
    only requirement is that each ***return a promise***
    where each is resolved or rejected
  */)
  .then((result) => {
    // do something with `result`
    console.log(result.items);
    // note returning what we want to come out **next**
    return result;
  });

};

var myresult;

start()
.then((result)=>{ myresult = result; })
.finally(()=>{ console.log('myresult:',myresult); });

Answer 4

The definition of promises is that you cannot literally assign result to myresult. However, you can make myresult a promise that resolves directly to result for the caller, however many promises were used to get that. The basic idea is that inside of each function in your above block, you should be returning the next Promise in the chain. eg:

function top() {

  //promise1
  return ParentPromise({
    ...some code here...
  }).then(function() {


    //promise2
        return ChildPromise({
          ..some code here...
        }).then(function(response) {
         var result = response.result.items;
         return result;

        });

});

};

In the end, the code calling top() won't know or care that 1, 2, or 12 chained promises were used to get result. It will also be able to register an error callback in case any of those promises failed.