AsyncStorage returns 检索项目时承诺

Question

说明

我正在尝试使用 AsyncStorage 以便在登录期间保存令牌。在用户按下登录按钮后，从我的后端收到令牌作为响应。成功登录后，屏幕会转到 ProfileScreen，我会在其中尝试检索已保存的令牌。

问题

当我尝试在 ProfileScreen 中检索项目并在控制台记录它时，我似乎得到了一个充满其他对象的 Promise 对象，并且在其中我可以看到我的值。我如何获得价值？（或者我应该说我如何履行诺言:)）

代码

Utilities/AsyncStorage.js（这里我有存储和检索项目的辅助函数）

const keys = {
jwtKey: 'jwtKey'
}

const storeItem = async (key, item) => {
  try {
    var jsonOfItem = await AsyncStorage.setItem(key, JSON.stringify(item));
    console.log('Item Stored !');
    return jsonOfItem;
  } catch (error) {
    console.log(error.message);
  }
};

const retrieveItem = async key => {
  try {
    const retrievedItem = await AsyncStorage.getItem(key);
    const item = JSON.parse(retrievedItem);
    console.log('Item Retrieved !');
    return item;
  } catch (error) {
    console.log(error.message);
  }
  return;
};

LoginScreen.js（这里，按下登录按钮后，我从后端收到了带有令牌的响应）

const LoginScreen = ({componentId}) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const loginPressed = async () => {
    await axios
      .post('localhost', {
        email,
        password,
      })
      .then(function(res) {
        console.log(res);
        storeItem(keys.jwtKey, res.data.token);
        push(componentID, views.profileScreen());
      })
      .catch(function(error) {
        console.log(error);
      });
  };

ProfileScreen.js（在此屏幕上，我尝试检索令牌，因为我将使用它）

const ProfileScreen = ({componentID}) => {
let testingAsync = retrieveItem(keys.jwtKey);
console.log(testingAsync);

控制台日志给我填充了其他对象的承诺对象。

Promise{_40:0, _65:0 , _55:null, _72:null}

在 _55 中我可以找到令牌的值。

Answer 1

感谢您的意见！正如@Bergi 在他的评论中提到的那样，我通过在我的 ProfileScreen 中使用 .then() 解决了这个问题。然后，在我收到第二条评论后，我在我的 ProfileScreen 中的 useEffect 中创建了一个 async&await 函数，以防止它重复自身，这为我解决了这个问题！

AsyncStorage returns 检索项目时承诺

AsyncStorage returns Promise when retrieving item

javascript

asynchronous

async-await

react-native

asyncstorage

说明

问题

代码