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

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();

CodePudding user response：

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);
})();

CodePudding user response：

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.

CodePudding user response：

You can await the promise:

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))
  })
}

(async () => {    
  await getAllKeys();
  prepareData();
})();

I used an IIFE because you can't await outside an async function.