Can't get returned value from an 'async' function - Javascript

Question

I am working with some asynchronous functions in javascript, but I am facing a problem, that I already posted here but that was a bit unpractical experience for everyone. Now, I made a simple constructor function with same member functions inside and returned a value, but seems like same problem to me, I tried my best but I don't know what is the problem, if you run this code then You can check what I want. Here's the demo link on JSfiddle, where you can see the results on console.

This is my Code

function Test() {
  this.init = async function() {
    var count = 0,
      page_job_details = null;

    async function waitMore() {
      console.log("Wait more loaded - " + (count + 1) + "...");
      let p = new Promise(function(res, rej) {
        setTimeout(async function() {
          if (count === 2) {
            res({
              page_job_details: "khan"
            });
          } else {
            count++;
            waitMore();
          }
        }, 2000);
      });
      var res = await p;
      if (res.page_job_details === '' || res.page_job_details === 'undefined' || res.page_job_details === null) {
        console.log("waiting more...");
        waitMore();
      } else {
        console.log("Response is : " + res.page_job_details);
        return res;
      }
    }
    var khan;
    await waitMore().then(function(r) {
      console.log(r);
      khan = r;
    });
    return khan;
  }
}
new Test().init().then(function(res) {
  console.log(res);
})

When you comment out the conditions within the setTimeout() and simply res({page_job_details:"khan"}); then you'll get the results in the new Test().init().then(function(res){ console.log(res); }). Otherwise not, and that's the main problem.

Thanks, can you explain what sort of output you were expecting instead? — CertainPerformance
– CertainPerformance, Commented Nov 23, 2018 at 6:17
@CertainPerformance I am expecting the answer in the res, when the Test().init() is called. — Nadeem Ahmad
– Nadeem Ahmad, Commented Nov 23, 2018 at 6:18
You're receiving "khan" at the end of the promise, is not what you want? — Miguel Angel
– Miguel Angel, Commented Nov 23, 2018 at 6:20
@MiguelAngel It's not being chained to the end .init().then section — CertainPerformance
– CertainPerformance, Commented Nov 23, 2018 at 6:22

Wiktor Zychla · Accepted Answer · 2018-11-23 06:27:02Z

3

One of the issues is that you are not returning the result of the recursive call from within the promise.

Instead of just calling it recursively

waitMore();

you seem to expect the result of the recursive call to be returned down the pipeline

res(waitMore());

function Test() {
  this.init = async function() {
    var count = 0,
      page_job_details = null;

    async function waitMore() {
      console.log("Wait more loaded - " + (count + 1) + "...");
      let p = new Promise(function(res, rej) {
        setTimeout(async function() {
          if (count === 2) {
            res({
              page_job_details: "khan"
            });
          } else {
            count++;
            res(waitMore());
          }
        }, 2000);
      });
      var res = await p;
      if (res.page_job_details === '' || res.page_job_details === 'undefined' || res.page_job_details === null) {
        console.log("waiting more...");
        waitMore();
      } else {
        console.log("Response is : " + res.page_job_details);
        return res;
      }
    }
    var khan;
    await waitMore().then(function(r) {
      console.log(r);
      khan = r;
    });
    return khan;
  }
}
new Test().init().then(function(res) {
  console.log(res);
})

answered Nov 23, 2018 at 6:27

Wiktor Zychla

48.4k6 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nadeem Ahmad Over a year ago

Perfect Results, can you explain it a bit to me technically; why the results of console.log("Response is : " + res.page_job_details); is three times displayed ? in the else part .

Wiktor Zychla Over a year ago

Three seems to be the level of your recursion.

CertainPerformance · Accepted Answer · 2018-11-23 06:29:58Z

There are two issues:

Inside waitMore's setTimeout, res is only called if count === 2. Otherwise, the created promise never resolves, and whatever might be awaiting waitMore() will never resolve - instead, that thread will remain suspended forever. You can fix this by calling res regardless of whether count is 2 or not - if the count is less than 2, call res with another invocation of waitMore:
```
res(waitMore());
```
On the level of the this.init function, in the case that you need to wait more, you need to await waitMore() (and put the response in a new variable that gets returned) so as to chain the Promise properly:
```
if (res.page_job_details === '' || res.page_job_details === 'undefined' || res.page_job_details === null) {
  console.log("waiting more...");
  const newRes = await waitMore();
  return newRes;
} 
```

function Test() {
  this.init = async function() {
    var count = 0,
      page_job_details = null;

    async function waitMore() {
      console.log("Wait more loaded - " + (count + 1) + "...");
      const p = new Promise((res, rej) => {
        setTimeout(() => {
          if (count === 2) res({ page_job_details: "khan" });
          else {
            count++;
            res(waitMore());
          }
        }, 2000);
      });
      const res = await p;
      if (res.page_job_details === '' || res.page_job_details === 'undefined' || res.page_job_details === null) {
        console.log("waiting more...");
        const newRes = await waitMore();
        return newRes;
      } else {
        console.log("Response is : " + res.page_job_details);
        return res;
      }
    }
    var khan;
    await waitMore().then(function(r) {
      console.log(r);
      khan = r;
    });
    console.log('about to return from init')
    return khan;
  }
}
new Test().init().then(function(res) {
  console.log('in init callback')
  console.log(res);
})

Collectives™ on Stack Overflow

Can't get returned value from an 'async' function - Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related