Wait until async finish, then save the data in variables

Question

I'm totally newbie in JavaScript ... I have this code:

const MMKV = new MMKVStorage.Loader().initialize();

async function getData() {
  let role = await MMKV.getStringAsync("role");
  if (role === "distribuidor") {
    consumerKey = Constants.Keys.distributorConsumerKey;
    consumerSecret = Constants.Keys.distributorConsumerSecret;
    return [consumerKey, consumerSecret];
  }
};

let data = getData();

let consumerKey = data[0];
let consumerSecret = data[1];

export default {

  WooCommerce: {
  url: "https://xxxxx.com/",
  consumerKey,
  consumerSecret,
},

But consumerKey and consumerSecret are always undefined...

I know (I think) it's because the getData () function is asynchronous, and when I save the data in the variables, the function is not finished executing yet, but I don't know how to do it right. I have been quite a while, I have read about the callback functions, the promises, ... And I think the solution may go there, but I am very lost.

I would greatly appreciate a help. Thank you so much everyone.

Regards.

```let data = await getData();``` should do the trick – RedFox Aug 04 '20 at 14:16 — RedFox, Aug 04 '20 at 14:16

score 1 · Answer 1 · answered Aug 04 '20 at 14:13

1

getDate() return a promise you have to add .then and move your code inside it

getDate().then(data=>{
let consumerKey = data[0];
let consumerSecret = data[1];
})

answered Aug 04 '20 at 14:13

Abdelrahman Hussien

505
2
4
17

you don't need `let data` any more – Abdelrahman Hussien Aug 04 '20 at 14:23
any thing that is using `consumerKey` or `consumerSecret` shall be written inside then – Abdelrahman Hussien Aug 04 '20 at 14:24
for more details about the promises and how to use it or deal with it check this website https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise – Abdelrahman Hussien Aug 04 '20 at 14:25

FZs · Accepted Answer · 2020-08-04T14:50:32.150

Once you have started doing something asynchronous, your code can't return results synchronously.

You have multiple options to solve this problem (neither will 'synchronize' the code):

Use the Top-level await proposal (currently at Stage 3). That's the only way in which you can properly export things asynchronously. If this feature isn't currently available to you, you can transpile your code with tools like Babel.
```
  let data = await getData();

  let consumerKey = data[0];
  let consumerSecret = data[1];

  export default {

    WooCommerce: {
      url: "https://xxxxx.com/",
      consumerKey,
      consumerSecret,
    },
  }
```

Use an IIAFE (Immediately Invoked Async Function Expression) wrapper:

  (async () => {
    let data = await getData();

    let consumerKey = data[0];
    let consumerSecret = data[1];

    //More code here
  )()

You'll have to export a promise, not a value, like this:

  export default {
    WooCommerce: (async() => {
      let data = await getData();

      let consumerKey = data[0];
      let consumerSecret = data[1];

      return {
        url: "https://xxxxx.com/",
        consumerKey,
        consumerSecret,
      };
    })(),
  }

then it!

  getData()
    .then(data => {

      let consumerKey = data[0];
      let consumerSecret = data[1];

      //More code here
    })

You'll also have to export a promise, not a value, like this:

  export default {
    WooCommerce: getData()
      .then(data => {

        let consumerKey = data[0];
        let consumerSecret = data[1];

        return {
          url: "https://xxxxx.com/",
          consumerKey,
          consumerSecret,
        };
      }),
  }

Hi FZs, but "export default" is executed before function ends, how could I fix that? Thanks to everyone, I am learning how it works. — pmj, Aug 04 '20 at 14:46
@jaime Sorry, I haven't noticed your `export` statement. I've edited my answer now, take a look — FZs, Aug 04 '20 at 14:59

Wait until async finish, then save the data in variables

2 Answers2