How to get value out of promise .then | callback returns undefined

Question

I use promise to handle async method getPropoalByPeriod but I can't get the obj data out of the foo function where console.log(89,foo(mycallback())) prints undefined. Please help to get data outside so that I can process them.

function foo(callback) {
    var MyPromises = periods.map((p) => {
        return new Promise((resolve, reject) => {
            myFunctions.getPropoalByPeriod(p.id, localStart, function(err, rows) {
                if (err) {
                    console.log(62, err);
                    return reject(err);
                } else
                    var obj = {
                        id: p.id,
                        name: p.name,
                        savedServices: rows[0] ? rows[0].services : '',
                    };
                resolve(obj)
            })
        })
    })
    Promise.all(MyPromises)
    .then((p) => {
        callback(p)
    })
    .catch((err) => console.log(79, err));
}

function mycallback(res) {
    console.log(85, res)
    return res
}
foo(mycallback)
console.log(89, foo(mycallback()))

This issue is different from what is on SO. It is using map() where I couldn't figure out how to apply await compared to the straightforward example of promise or async/await.

Answer 1

then accepts a function and send the result of the Promise to that function (the first argument of your callback function).

Promises are asynchronous by nature, and their output is not immediately available. That's why we use then method to get the result.

In your code, mycallback receives the result of all the Promises, and the value res (that is printed along with value 85) is what you get from the promises.

Remember, that because you used Promise.all on an array of promises, you get an array of results from all the succeeded promises. This means that res is an array, not a single value.

Your code suffers from some other problems. The first call to your foo method is good, and correctly prints the results. Your second call however (console.log(89,foo(mycallback()))) is incorrect, because instead of passing a function to foo, you are passing the result of calling callback(), which is undefined, to the foo function. Remove that line, and everything should be working.

Here is the complete revised code:

function foo() {
  var MyPromises = periods.map((p) => {
    return new Promise((resolve, reject) => {
      myFunctions.getPropoalByPeriod(p.id, localStart, function(err, rows) {
        if (err) {
          console.log(62, err);
          reject(err);
        } else {
          var obj = {
            id: p.id,
            name: p.name,
            savedServices: rows[0] ? rows[0].services : '',
          };
          resolve(obj);
        }
      });
    });
  });
  return Promise.all(MyPromises);
}

// Pure promises:

foo().then(r => console.log(r));

// or using async/await:

async function run() {
  console.log(await foo());
}

run();

// 

Remember, the point of using promises is freeing you from using callbacks. So there is no need to pass a callback to foo.

You can use .then or await to retrieve the value of a Promise. You can only use await in an async function; so you cannot use await in global score, and you have to define a function, and call it. So in your case, using .then is easier.