React Native AsyncStorage返回promise而不是value

时间:2017-03-16 19:34:20

标签: javascript react-native

我知道这是RN中一个非常常见的问题,我仍在尝试理解从属性文件加载数据时返回promise的非常可能的优势,而不仅仅是返回值,这使得链接请求非常麻烦。 。但无论如何。这就是我现在所拥有的,它是AsyncStorage RN实现的包装器:

multiGet = async (key) => {
    var value = null;
    try {
      value = await AsyncStorage.multiGet(key).then(
        (values) => {
          value = values;
          console.log('Then: ',values);
        });
    } catch (error) {
      console.log('Error: ',error);
    }
    console.log('Final: ',value);
    return value;
    }

此时,值未定义。在我的主要代码中,我有这个:

var filter = this._getFilter();
console.log('returned filter:',filter);

_getFilter函数是使用AsyncStorage包装器的函数,但是'返回的过滤器'在第一个函数之前记录,所以它不会在继续之前等待返回的值,所以我得到一个未定义的值。

起初,我认为只需使用async / await AsyncStorage wold就会返回一个值而不是一个promise但是在测试之后,我得到的值是:

value = await AsyncStorage.getItem('key') 

仍然是一个承诺,所以我必须使用then()来读取值。

基本上我在日志中看到的顺序是:

_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

我不知道发生了什么或如何正确处理这个问题。这应该是非常简单和常见的用例。

我很乐意在不使用第三方模块的情况下解决这个问题。

由于

编辑:在了解了async / await和callbacks的概念后,我终于有了一个有效的代码。我不喜欢它,因为它使代码很难阅读。我可能需要重构它以使用promises但是现在,它可以工作。以下是一些片段,以防有人发现同样的问题:

this._getFilter(body,this._filterSearchCallback,callback);

注意:我正在通过链发送正文,因为我在传递函数时“完成”信息。第二个参数是实际进行获取查询的第一个回调,第三个回调是获取函数的返回。

_getFilter(body,callback,returnCallback){

      {...}

      this._sh.multiGet(keysBanks).then(
        (banks) => {
          filter.banks = banks;
          console.log(banks);
          this._sh.multiGet(keysCards).then(
            (cards) => {
              console.log(cards);
              filter.credit_cards = cards;
              callback(body,filter,returnCallback);
            });
        }
      );

    }

这里基本上我链接了几个获取因为我需要来自商店的几个值。这是我不喜欢的部分。 _sh是我的StorageHelper,它是AsyncStorage的包装器,没什么特别的。

multiGet = async (key) => {
    const value = await AsyncStorage.multiGet(key);
    return value;
    }

然后我的最后一个回调实际上使得获取并将JSON响应发送到主屏幕本身:

_filterSearchCallback(body,filter,callback){

      body.filter = filter;

      return fetch(apiUrl, {method: 'post', body: JSON.stringify(body)})
      .then((response) => response.json())
      .then((responseJson) => {
        callback(responseJson);
      })
      .catch((error) => {
        console.error(error);
        callback(responseJson);
      });
    }

我会改进这个并使其更清洁但是现在,它有效。希望它也能帮助别人。

2 个答案:

答案 0 :(得分:13)

曾几何时,我遇到了同样的问题所以我做了什么,我将在这里与你分享。

基本上,你的执行正在向前推进而没有采取任何价值,即未定义你现在得到的东西,所以有3-4种方法可以摆脱这种情况:

1)异步等待 2)回调

1)我们将从大多数人使用的回调开始。

我们将使用您的代码来实现此目的:

MatplotlibDeprecationWarning: The ishold function was deprecated in version 2.0.
MatplotlibDeprecationWarning: axes.hold is deprecated.

2)异步/ AWAIT

如果你单独使用await,那么你会得到一个错误,在函数中使用await你必须通过在函数名之前设置async关键字来声明async函数。

    _getFilter(key,callback)
{
    multiGet = (key) => {
        var collect;
        try {
          var value = AsyncStorage.multiGet(key).then(
            (values) => {
           //   value = values;
              console.log('Then: ',values);
             callback(values)
            });
        } catch (error) {
          console.log('Error: ',error);
        }
        console.log('Final: ',value);

        }
}

    this._getFilter(key,function(filter){
      console.log('returned filter:',filter);
    });

希望这会清除你的概念,并帮助你与其他反应原生的开发者。我看到很多人都在努力解决这个问题,所以今天我有机会清除你的疑虑。

干杯:)

答案 1 :(得分:4)

事情是await将承诺转换为值,您不需要使用.then()。请尝试以下方法:

const keys = await AsyncStorage.getAllKeys()
const values = await AsyncStorage.multiGet(keys)

// at this point `values` will have data for all keys