CODEWITHSUNDEEP
javascriptreactjsreact-nativepromiseexpo
Daniel Scho
Daniel Scho

Reputation: 1

Async function makes it hard to access variable because variable is not "ready" when it is needed

I have problems with my variable keys. getAllKeys saves keys into the variable keys. I want to use keys in prepareDate but when the code gets to prepareDate it does not work because the values are not yet asignt to variable keys (because of this JavaScript Async stuff)

I need to know how I can wait until keys is "ready" so prepareDate (and the rest of the code) can work with keys. There is .then and promise (if this is the right solution) but I do not know how to use them here.

  let keys = [];

  const getAllKeys = async () => {
    try {
      keys = await AsyncStorage.getAllKeys();
    } catch (e) {
      // read key error
    }
    console.log("keys: ", keys) // This works, the keys are saved inside keys
  }

  const getData = async (key) => {
    try {
      const jsonValue = await AsyncStorage.getItem(key);
      return jsonValue != null ? JSON.parse(jsonValue) : null;
    } catch (e) {
      // error reading value
    }
  };

  const prepareData = () => {
    console.log("keys: ", keys)
    keys.forEach((key) => {   // I want that this works but there is nothing inside keys.. 
      console.log("hier")
      console.log(getData(key))
    })
  }

  getAllKeys();
  prepareData();

Upvotes: 0

Views: 745

Answers (2)

Bergi
Bergi

Reputation: 664395

Stop using a global variable keys. Instead, return a value from getAllKeys (so that getAllKeys() returns a promise for that), and accept the keys as a parameter to preprateData:

const getAllKeys = async () => {
  try {
    return await AsyncStorage.getAllKeys();
  } catch (e) {
    // read key error
    return [];
  }
};

const prepareData = async (keys) => {
  const data = Promise.all(keys.map(key => {
    console.log(key);
    return getData(key);
  }))
  console.log(data);
  return data;
}

Now you can use them as

getAllKeys().then(prepareData);

or in

(asnyc () => {
  const keys = await getAllKeys();
  console.log("keys: ", keys) // This works
  await prepareData(keys);
})();

Upvotes: 2

Andre Nuechter
Andre Nuechter

Reputation: 2255

You could postpone the call to prepareData until after getAllKeys is finished, like so:

getAllKeys().then(prepareData);

We can do that because getAllKeys is an async function and thus returns a Promise, which allows us to call the then-method on it.

Upvotes: 0

Related Questions