React Native与Expo环境下如何实现AsyncStorage的Top Level Await全局数据读取

问题核心根因 #

• 你遇到的pending空值问题本质是JavaScript异步执行机制导致的：getData()执行后返回的是Promise对象，直接把返回值赋值给全局变量时，异步读取AsyncStorage的流程根本没有执行完成，拿到的自然是处于pending状态的Promise实例，而非解析后的实际数据。
• 你之前尝试的Node侧实验flag全部失效的原因是：Expo应用的JS代码最终是经过Metro打包、由Hermes引擎在移动端执行的，和你本地运行启动命令的Node环境是完全隔离的，那些只作用于Node进程的参数完全不会影响打包后的应用执行逻辑。

方案一：Expo环境下正确开启Top Level Await支持 #

Top Level Await并非Node专属特性，Expo的Metro转译链、Hermes引擎从对应版本开始已原生支持，正确配置步骤如下：

• 版本要求：Expo SDK 47及以上（对应绑定的Hermes v0.11.0+），低版本需要先升级SDK，否则即使配置转译参数，引擎也无法识别顶层await语法。
• Babel配置调整：修改项目根目录babel.config.js，在babel-preset-expo的配置项中开启顶层await转译，示例配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo', {
        jsxRuntime: 'automatic',
        topLevelAwait: true
      }]
    ],
  };
};

• 注意事项：
  • 顶层await只能在ES模块（即遵循ES Module语法的文件）中使用，普通CommonJS模块会报语法错误。
  • 不要再给npm启动命令传入Node侧的实验参数，这类参数对应用打包流程无任何作用。
  • Top Level Await会阻塞所在模块的导出流程，如果在顶层写const insights = await AsyncStorage.getItem('redditInsights')，会导致整个依赖该模块的应用启动流程被卡住，一旦本地存储读取耗时变长，会直接拉长应用白屏时间。

方案二：不依赖Top Level Await的全局数据读取实践（更推荐） #

相较于硬开Top Level Await的方式，以下工程方案既可以解决异步时序问题，也不会带来启动阻塞的副作用：

• 启动期预加载+全局状态挂载
  在应用最外层的根组件中，先异步读取目标本地存储数据，将结果存在全局状态容器（内存变量、Context、轻量状态库均可）中，等数据加载完成后再渲染业务路由，从根源上避免业务代码读取到空值。
  示例实现：

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

// 全局可访问的内存变量
let redditInsights = null;

export default function App() {
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    // 启动阶段优先预加载本地存储数据
    const loadLocalData = async () => {
      try {
        const value = await AsyncStorage.getItem('redditInsights');
        redditInsights = value ? JSON.parse(value) : null;
      } catch (err) {
        console.warn('本地数据加载失败', err);
      } finally {
        setIsAppReady(true);
      }
    };
    loadLocalData();
  }, []);

  // 数据未加载完成时展示加载占位，不渲染业务页面
  if (!isAppReady) {
    return <View><Text>数据加载中...</Text></View>
  }

  // 后续所有业务组件中直接读取redditInsights即可，此时数据一定已完成赋值
  return (
    // 业务路由与组件
  )
}

• 带内存缓存的异步访问封装
  如果不需要强制在启动期加载数据，可以封装一个带内存缓存的访问方法，第一次调用时从AsyncStorage读取结果并存入内存，后续所有调用直接读取缓存值，既不会重复读取本地存储，也能规避时序问题：

import AsyncStorage from '@react-native-async-storage/async-storage';

let cache = null;
export const getRedditInsights = async () => {
  // 缓存已存在直接返回
  if (cache !== null) return cache;
  // 无缓存时读取本地存储
  const value = await AsyncStorage.getItem('redditInsights');
  cache = value ? JSON.parse(value) : null;
  return cache;
}

• 启动屏联动加载
  可以配合Expo的原生启动屏API，在数据预加载阶段保持启动屏显示，加载完成后再隐藏启动屏，用户不会感知到白屏过程，体验优于无加载态的Top Level Await实现。

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