React Native - Async/Await on Class not working as expected

Question

Here is my code...

'use strict';
var React = require('react-native');
var {
  AsyncStorage
} = React;



exports.buildUrl = function(){
  var test = new Sales();
  test.getOrder();
}

class queryBuilder{

  constructor() {

  }

  getUrl(){
    AsyncStorage.getItem('auth').then((value) => {
      var auth = JSON.parse(value);
      var store = auth.url;
      console.log('store = ' + store);
      return store;
    });
  }

}

class Sales extends queryBuilder{

  async getOrder(){
    console.log('get order hit');
    try{
        var urlstart =  await this.getUrl();
    } catch(e) {
      console.log('ERROR')
      console.log(e);
    }
    console.log('URL BELOW');
    console.log(urlstart);
    console.log('URL ABOVE');
  }

}

In my getOrder method I was hoping that urlstart would not be undefined because i have used await.

The console.log within getUrl() method is the last thing to return in my console.

Maybe it's that saturday feeling, any help much appreciated!

Why not make it a simple `async getUrl() { return JSON.parse(await AsyncStorage.getItem('auth')).url; }`? — Bergi, May 07 '16 at 21:20

Matt The Ninja · Answer 1 · 2016-05-08T14:52:57.630

0

Resovled this myself. Async Await require a promise to be returned on the function i'm calling. I have modified the getUrl() method like below..

  getUrl(){
    return new Promise(function(resolve, reject) {
      AsyncStorage.getItem('auth').then((value) => {
        var auth = JSON.parse(value);
        var store = auth.url;
        console.log('store = ' + store);
        resolve(store);
      });
    }

Any further sugestions still greatly appreciated.

Updated better, Thanks to Yuri

getUrl(){ return AsyncStorage.getItem('auth').then(value => JSON.parse(value).url) }

edited May 08 '16 at 14:52

answered May 07 '16 at 18:32

Matt The Ninja

2,641
4
28
58

`getUrl(){ return AsyncStorage.getItem('auth').then(value => JSON.parse(value).url) }` should be enough – Yury Tarabanko May 07 '16 at 18:35
Show just the `function` itself just needs to return, i just had the wrong scope? – Matt The Ninja May 07 '16 at 18:37
1

Since you allready have a promise you don't need to create one manually. Simple return would suffice. – Yury Tarabanko May 07 '16 at 18:46
Please update your answer, using `new Promise` in this case is an antipattern. – loganfsmyth May 07 '16 at 19:28
Avoid the [`Promise` constructor antipattern](http://stackoverflow.com/q/23803743/1048572)! – Bergi May 07 '16 at 21:19
What do you mean anti pattern ? Promise in promise? – Matt The Ninja May 07 '16 at 21:20
You should do `return AsyncStorage.getItem('auth').then((value) => { ... return store;});`. Don't create a new promise if you already have one. – Felix Kling May 07 '16 at 22:35

React Native - Async/Await on Class not working as expected

1 Answers1