时间戳

首页 > 解决方案 > React Native AsyncStorage：使用等待和异步

react-native - React Native AsyncStorage：使用等待和异步

问题描述

我试图从我的 AsyncStorage 数据库中获取所有密钥，然后在另一个函数中过滤它们，似乎无法让它等到 AsyncStorage 返回数据？

此函数返回数组中的键：

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

这个函数是为了调用上面的函数然后等待结果然后过滤数据。

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 
}

在这里尝试了很多，但无法理解它......任何帮助都会很棒，谢谢。

标签： react-nativeasynchronousasync-awaitasyncstorage

解决方案

你实际上需要从你的DATABASE_getAllCoffeeEntries

你可以做这样的事情。

  1. 首先，我们将您的电话包装在一个承诺中。resolve如果我们从那里得到所有物品AsyncStorage或者reject如果有问题，那将是什么。
  2. 确保我们的调用AsyncStorage在try/catch. await调用可以抛出，所以我们需要确保我们处理任何错误。
  3. async/await在从中获取项目时使用，AsyncStorage因为这可以解决callbacks捕获来自 的响应的问题AsyncStorage。它还可以使您的代码更易于阅读

这是重构

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))
    }
  });
}

然后我们可以像这样调用函数，尽管我们必须将它包装在 atry/catch中，因为它可以抛出。

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
  }
}

推荐阅读