ReactNative AsyncStorage存token后getItem取值报未处理Promise错误问题

• 异步函数调用逻辑错误：所有async标记的函数默认返回Promise对象，你直接同步调用getData()并打印，拿到的是Promise实例而非实际返回值，且未对Promise做catch处理，因此触发未处理Promise报错。
• 返回值与解析逻辑错误：代码中return token, JSON.parse(token)使用了逗号运算符，最终只会返回JSON.parse(token)的结果；但你存储token时直接传入了接口返回的字符串类型token，未做JSON.stringify处理，直接对普通字符串执行JSON.parse会抛出语法错误。
• 读写时序问题：如果调用getData()的时机是在dispatch登录action之后立刻执行，没有等待异步的setItem操作完成，此时AsyncStorage中还没有写入token，自然读取不到值。

1. 修正token读写的统一逻辑 #

存储和读取保持序列化逻辑一致，避免解析报错，修改后的getData代码如下：

const getData = async () => {
  try {
    const token = await AsyncStorage.getItem('USER_TOKEN');
    // 存储时是原生字符串，不需要JSON.parse，直接返回即可
    // 如果后续需要存对象可以统一用JSON.stringify存、JSON.parse取
    return token;
  } catch (error) {
    console.error('读取token失败', error);
    return null;
  }
};

2. 正确处理异步函数的返回值 #

调用async函数时需要用await或者.then()获取返回结果，示例如下：

函数组件中使用useEffect调用示例 #

useEffect(() => {
  const fetchToken = async () => {
    const token = await getData();
    console.log(token, 'token From AsyncStorage');
  };
  fetchToken();
}, []);

登录成功后再读取的时序控制示例 #

如果是在触发登录action后立刻读取，需要等待整个异步登录流程完成：

// 触发登录时加await等待异步操作完成
const handleLogin = async (loginParams) => {
  await dispatch(checkSmsToLoginUser(loginParams));
  const token = await getData();
  console.log(token, '登录后拿到的token');
};

也可以监听Redux中登录成功的状态，状态变为已登录后再执行读取操作，避免时序问题。

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