React Native AsyncStorage: using await and async

Question

I'm trying to get all keys from my AsyncStorage database and then filter them in another function, can't seem to get it to wait until AsyncStorage has returned the data?

This function returns the keys in an array:

DATABASE_getAllCoffeeEntries =  () => {
    AsyncStorage.getAllKeys((err, keys) => {})
    .then(keys => {
      AsyncStorage.multiGet(keys, (error, items) => { 
       return items;
      }).then(items => {
        return items; // array of items is returned
      });
  });
 }

and this function is meant to call the function above then wait for the result then filter down the data.

somefunc = async () => {
  var items = await DATABASE_getAllCoffeeEntries();
  var someItems = items.filter(function (result, i, item) {
          // do filtering stuff
          return item;
    });

    // do something with filtered items 
}

Have tried a lot on here but can't get my head around it... any help would be great, thanks.

getAllCoffeeEntries should be an async function to be called with await keyword, — Shabbir Haider
– Shabbir Haider, Commented Feb 8, 2019 at 8:15

Andrew · Accepted Answer · 2019-02-08 10:28:44Z

3

You need to actually return something from your DATABASE_getAllCoffeeEntries

You could do something like this.

First we wrap your call inside a promise. Which will resolve if we get all the items from AsyncStorage or reject if there is a problem.
Make sure that our calls to AsyncStorage are inside a try/catch. await calls can throw so we need to make sure that we handle any errors.
Use async/await when getting the items from AsyncStorage as this gets ride of the callbacks that are trapping the responses from AsyncStorage. It also can make your code easier to read

Here is the refactor

DATABASE_getAllCoffeeEntries = () => {
  return new Promise( async (resolve, reject) => {
    try {
      let keys = await AsyncStorage.getAllKeys();
      let items = await AsyncStorage.multiGet(keys)
      resolve(items)
    } catch (error) {
      reject(new Error('Error getting items from AsyncStorage: ' + error.message))
    }
  });
}

Then we can call the function like this, though we will have to wrap it in a try/catch as it can throw.

somefunc = async () => {
  try {
    var items = await this.DATABASE_getAllCoffeeEntries();
    var someItems = items.filter(function (result, i, item) {
          // do filtering stuff
          return item;
    });
    // do something with filtered items 
  } catch (error) {
    // do something with your error
  }
}

edited Feb 8, 2019 at 10:28

answered Feb 8, 2019 at 9:16

Andrew

28.7k9 gold badges95 silver badges108 bronze badges

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

4 Comments

Benjamin Over a year ago

And this is the reason I ask questions on stack, Thanks! this really helps a lot and I like the clean way you call the AsyncStorage DB, so easy to read! Thanks again!

Andrew Over a year ago

I am glad that it helped you out. promises and async/await can be tricky. This is quite a good article medium.com/@bluepnume/…

Benjamin Over a year ago

Thanks for the link! will study it thoroughly! the code above works perfectly! once this. is added to the called DB function in somefunc() (was my mistake)

Andrew Over a year ago

Yeah, I missed it too. I just copied your code and added the try/catch. I've now fixed it in my answer

Collectives™ on Stack Overflow

React Native AsyncStorage: using await and async

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related