CODEWITHSUNDEEP
javascriptreactjsreact-native
mk1
mk1

Reputation: 87

Returning Value of a Promise - { AsyncStorage } React-Native

I'm trying to figure out how to return the result of a promise. I have been following the React Native documentation AsyncStorage page here: https://facebook.github.io/react-native/docs/asyncstorage

I'm making use of a code snippet provided in the documentation and made a couple of my own alterations to try and access the data.

As you can see in the example I provide I try to declare an empty array and populate it with the result of the AsyncStorage call. 

export const loadLocalData = async () => {
var itemsStoredLocally = [];

        AsyncStorage.getAllKeys((err, keys) => {
        AsyncStorage.multiGet(keys, (err, stores) => {
            stores.map((result, i, store) => {
                let key = store[i][0];
                let value = store[i][1];

                console.log("Inside the method : ", result)
                itemsStoredLocally.push(result);
            });
        });
    })

    console.log("Outside the method: ", itemsStoredLocally);

   return itemsStoredLocally;
}

In my console I am getting this: 

Outside the method:  Array []
Inside the method :  Array [
  "1234",
  "The data stored locally",
]

When really what I want to see is this: 

Inside the method :  Array [
  "1234",
  "The data stored locally",
]

Outside the method:  Array [
  "1234",
  "The data stored locally",
]

From what I understand a promise is being returned and I need to handle that promise in a way that I can wait for it to resolve AND then I can make use of it.

The trouble is, I just don't understand how. I see online there is mentions of things like Promise.resolve() and then making use a .then() method but everything that I try just doesn't seem to work.

Any suggestions? Thank you

Upvotes: 0

Views: 2147

Answers (2)

Anton Marinenko
Anton Marinenko

Reputation: 2982

Try this way

export const loadLocalData = async () => {
var itemsStoredLocally = [];

        AsyncStorage.getAllKeys((err, keys) => {
        AsyncStorage.multiGet(keys, (err, stores) => {
            stores.map((result, i, store) => {
                let key = store[i][0];
                let value = store[i][1];

                console.log("Inside the method : ", result)
                itemsStoredLocally.push(result);
            });
            console.log("Outside the method: ", itemsStoredLocally);
            return itemsStoredLocally;
        });
    })
}

Upvotes: 0

trincot
trincot

Reputation: 350137

You should not use the callback arguments. That is for when you don't use the promise return value, and that would just make the coder's life more difficult. Instead, omit those callback arguments, and rely on the returned promise:

export const loadLocalData = async () => {
    var itemsStoredLocally = [];

    // Use await:    
    const keys = await AsyncStorage.getAllKeys();
    const stores = await AsyncStorage.multiGet(keys);
    // Use forEach, not map: map is to return a mapped array
    stores.forEach(result => {
        let [key, value] = result;
        // Do something with key/value?
        // ...
        console.log("Inside the method : ", result)
    });
    return stores; // Just return the result
}

The function returns a promise, so you need to await it, for example with then:

loadLocalData.then(data => console.log("Outside the method: ", data));

Note that using async only makes sense when you use await in that function. So there was already a red flag there in your code...

Upvotes: 2

Related Questions