Promise inside promise: what's the correct way to return a variable from the child promise? (JS)

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

Solution 1:

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.

Solution 2:

The neatest way in my opinion is to return the promise and chain them 'down' instead of to the left, avoiding christmas tree-like callback hell.

function top() {
  //promise1
  return ParentPromise({
    ...some code here...
  }).then(function(parent) {
    //promise2
    return ChildPromise(parent.id)
  }).then(function(response) {
    // do something with `result`

    return response.result.items;
  });
}

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

Edit: Or in ES6 / lambda notation;

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

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

Edit: Or using Async/Await;

async function top() {
  const parent = await ParentPromise()
  const child = await ChildPromise(parent.id)

  return child.result.items
}

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

Solution 3:

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);
  });
});