title: React Native AsyncStorage returns promise instead of value
body: <p>I understand this is a very common problem in RN and I am still trying to understand the very possible advantage of returning a promise when loading data from a property file instead of just returning the value, which makes chaining requests very cumbersome...but anyway. Here is what I have right now, which is a wrapper from the AsyncStorage RN implementation:</p>
  
  <pre><code>multiGet = async (key) =&gt; {
      var value = null;
      try {
        value = await AsyncStorage.multiGet(key).then(
          (values) =&gt; {
            value = values;
            console.log('Then: ',values);
          });
      } catch (error) {
        console.log('Error: ',error);
      }
      console.log('Final: ',value);
      return value;
      }
  </code></pre>
  
  <p>At this point, value gets undefined. In my main code I have this:</p>
  
  <pre><code>var filter = this._getFilter();
  console.log('returned filter:',filter);
  </code></pre>
  
  <p>The _getFilter function is the one using the AsyncStorage wrapper but the 'returned filter' is logging before the first function so it is not waiting for the returned values before continue, so I get an undefined value. </p>
  
  <p>At first, I thought that just by using the async/await the AsyncStorage wold return a value instead of a promise but after testing, the value I get from:</p>
  
  <pre><code>value = await AsyncStorage.getItem('key') 
  </code></pre>
  
  <p>is STILL a promise, so I have to use then() to read the value. </p>
  
  <p>Basically the order that I am seeing in the logs is:</p>
  
  <pre><code>_getFilter
  returned value: undefined
  Then: value: here I get the correct value from the keys but the code already passed and I don't have the correct value in the variable
  </code></pre>
  
  <p>I have no clue what is going on or how to handle this correctly. This is supposed to be very simple and common use case. </p>
  
  <p>I would love to solve this without using a third party module. </p>
  
  <p>Thanks</p>
  
  <p><strong>SOLUTION</strong>
  Edit: After understanding a little more about the concepts of async/await and callbacks, I finally have a code that works. I don't like it, because it makes the code very hard to read. I might need to refactor it to use promises but for now, it works. Here are some snippets in case someone finds the same issue:</p>
  
  <pre><code>this._getFilter(body,this._filterSearchCallback,callback);
  </code></pre>
  
  <p>Note: I am sending the body through the chain because I am "completing" the information as I pass the functions. The second parameter is the first callback that actually makes a fetch query and the third callback is the return of the fetch function.</p>
  
  <pre><code>_getFilter(body,callback,returnCallback){
  
        {...}
  
        this._sh.multiGet(keysBanks).then(
          (banks) =&gt; {
            filter.banks = banks;
            console.log(banks);
            this._sh.multiGet(keysCards).then(
              (cards) =&gt; {
                console.log(cards);
                filter.credit_cards = cards;
                callback(body,filter,returnCallback);
              });
          }
        );
  
      }
  </code></pre>
  
  <p>Here basically I am chaining a couple of gets because I need several values from the store. This is the part I dont really like. _sh is my StorageHelper which is a wrapper to the AsyncStorage, nothing fancy. </p>
  
  <pre><code>multiGet = async (key) =&gt; {
      const value = await AsyncStorage.multiGet(key);
      return value;
      }
  </code></pre>
  
  <p>Then my very last callback that actually makes the fetch and send the JSON response to the main screen in react native:</p>
  
  <pre><code>_filterSearchCallback(body,filter,callback){
  
        body.filter = filter;
  
        return fetch(apiUrl, {method: 'post', body: JSON.stringify(body)})
        .then((response) =&gt; response.json())
        .then((responseJson) =&gt; {
          callback(responseJson);
        })
        .catch((error) =&gt; {
          console.error(error);
          callback(responseJson);
        });
      }
  </code></pre>
  
  <p>I will improve this and make it cleaner but for now, it works. Hope it helps others too. </p>