React Native Async Storage返回Promise而非变量，如何正确处理Async Await？

我正尝试使用React Native Async Storage为登录功能存储用户和认证信息。storeUser()函数运行正常：

// 存储用户名到Async Storage的函数
const storeUser = async (value) => {
  try {
    await AsyncStorage.setItem('username', value);
    // 成功打印用户名
    console.log('已存储用户到Async Storage: ' + value);
  } catch (e) {
    // 存储失败
    console.log('存储用户名时出现错误');
  }
};

我能在async函数内部获取并访问存储的值，但返回的值无法在函数外部使用。getUser函数如下：

// 从本地Async Storage获取用户名
const getUser = async () => {
  try {
    const value = await AsyncStorage.getItem('username');
    if (value !== null) {
      // 已存储的值 - 打印用户名
      console.log('getUser函数返回的值: ' + value);
      return value;
    }
  } catch (error) {
    // 读取失败
    console.log('无法获取用户信息');
  }
};

我尝试将返回结果赋值给user变量，但得到的是Promise对象而非实际值：

// 尝试从Async Storage获取用户并赋值给变量
const user = getUser().then((res) => {
  if (res !== null) {
    // 打印用户名
    console.log('调用getUser函数，找到用户: ' + res);
    return res;
  } else console.log('getUser函数执行出错');
});

我也试过用await直接赋值，但await不能在async函数外部使用：

// 无效，因为不在async函数内部
//const user = await getUser()

我确信自己在Async Await的处理上存在根本性问题，请问如何让存储的变量能在async函数外部访问？

解决方案 #

1. React组件中用状态管理（推荐） #

在React组件里，结合useState和useEffect，在组件挂载时异步获取用户信息并更新状态，后续就能直接使用状态值：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

function LoginComponent() {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // 定义内部async函数获取用户
    const fetchStoredUser = async () => {
      const user = await getUser();
      setCurrentUser(user);
    };
    // 调用获取函数
    fetchStoredUser();
  }, []);

  // 渲染时直接使用currentUser状态
  return (
    <div>
      {currentUser ? `当前登录用户：${currentUser}` : '请登录'}
    </div>
  );
}

2. 通过.then()链式调用处理结果 #

如果不在React组件中，需要在then的回调函数内部使用获取到的用户值，而不是直接赋值给变量：

getUser().then((res) => {
  if (res) {
    // 在这里处理用户信息，比如调用业务逻辑函数
    console.log('已获取用户：', res);
    processUserInfo(res);
  } else {
    console.log('未找到存储的用户信息');
  }
});

// 示例业务函数
function processUserInfo(user) {
  // 处理用户信息的逻辑
}

3. 封装到async函数中执行 #

把需要使用用户信息的逻辑全部放到一个async函数里，内部用await获取值：

const handleUserRelatedLogic = async () => {
  const user = await getUser();
  if (user) {
    // 在这里同步使用user值
    console.log('用户信息：', user);
    // 执行其他需要用户信息的操作
  } else {
    console.log('无用户信息');
  }
};

// 调用这个async函数
handleUserRelatedLogic();

关键说明 #

• async函数永远返回Promise：不管内部return什么值，async函数都会把它包装成Promise对象，所以直接赋值得到的是Promise，必须通过await（仅在async函数内可用）或.then()提取实际值。
• 异步操作无法同步获取结果：这是JavaScript异步机制的特性，所有依赖异步结果的逻辑都要放在异步回调或async函数内部。

内容的提问来源于stack exchange，提问作者Bubdd