Promises in Javascript looping

Question

I am trying to understand promises but I am finding myself in a loop of using await and async over and over again.

My understanding is that async keyword added before the function, you can indicate that the function always returns a promise.

I have a function that reads a file and returns a promise, the name is getDataFromFile();

I want to be able to get the data from it once it resolves, so rather than using resolve, reject new promise I want to use await async.

After await when the promise is returned I want to get the data and assign it to DataFromPromise variable.

let DatafromPromise = {};
  const loadDataPromise = async () => {  // Since its async, it seems like its returning a promise too
    try {
      const myPromise = getDataFromFile();
      DatafromPromise = (await myPromise).value;
      //console.log(DatafromPromise); // This has value
    } catch (error) {
      console.log(error);
    }
  };
  loadDataPromise();
  console.log(DatafromPromise); // This is empty? Why?

If I put await loadDataPromise() I will have to put async around this entire block of code too, now see that is putting me in a loop of await/async.

getDataFromFile is already returning a promise. Then I add const loadDataPromise which is a const function returning a promise.. Then if I add await loadDataPromise, I feel like I am going in a loop of returning promises without actually getting the data.

At what point in the code the promise is getting resolved and value is assigned?

Thanks so much for helping.

score 0 · Answer 1 · answered Oct 15 '20 at 01:41

0

You didn't await the result of loadDataPromise(). It returned a promise long before it was actually done populating the DatafromPromise variable. So, you're attempting to read the variable BEFORE the asynchronous code has completed and populated the variable.

By the way, this "coding by side effect" is not a good way to code. If loadDataPromise() wants to communicate back a completion value, it should just return that value which will then be the resolved value of the promise it returns and the caller can access that value with .then() or await.

Perhaps like this:

const loadDataPromise = async () => {
    const result = await getDataFromFile();
    return result.value;           // will be resolved value of returned promise
};

loadDataPromise().then(val => {
    console.log(val);
}).catch(err => {
    console.log(err);
});

This, of course, assumes that getDataFromFile() is also properly returning a promise that resolves to the desired value when its asynchronous operation is complete.

answered Oct 15 '20 at 01:41

jfriend00

683,504
96
985
979

Thanks jfriend00, So I understand what your saying that I am trying to populate the value of DataFromPromise BEFORE its assigned a value. Your code does help, but I am trying to replace using then, catch with await and async to read the value. How can I get the result.value using await, because if I add await I will need to add asyn in the outer block making it again a promise return? – Sarah Oct 15 '20 at 02:01
1

@Sarah - yes, you can only use await inside an async function so the calling function would need to be async to use await. – jfriend00 Oct 15 '20 at 03:21
Gotcha, so it sounds like the use or consumption of the result value will need to be handled inside async function too correct, like display of values read from the file on the UI. Maybe adding those values in an array or dictionary and showing them? – Sarah Oct 15 '20 at 16:06
@Sarah - I'm not sure if you're asking a question in that last comment? You can either use `await` inside an `async` function or you can use `.then()` which does not need to be in an `async` function. Has this now answered your original question? – jfriend00 Oct 15 '20 at 20:09
Sorry for the late reply jFriend00. yes I was asking a question. Like in my above example. DatafromPromise = (await myPromise).value; //console.log(DatafromPromise); // This has value, I should use the value returned here within the loadDataPromise function. Either ways if I need to use the value, it will need to be within the async function correct? – Sarah Oct 20 '20 at 01:10
Also, what is coding by side effect? – Sarah Oct 20 '20 at 01:11
@Sarah - That's when your function creates its result by modifying some variable outside the function (`DatafromPromise` in your case) when it could just directly return the desired result. The "side effect" is that when you call the function it modifies something outside the function. That's generally not considered a good way to program when the situation allows you to just return the value (or resolved value of the returned promise) that the function created. – jfriend00 Oct 20 '20 at 01:38

Promises in Javascript looping

1 Answers1