React Native中使用then处理AsyncStorage未等待问题排查

你的问题核心是没搞清楚Promise异步操作的执行逻辑，以及then的正确使用方式，以下是具体分析和解决方案：

问题分析 #

第一个代码示例的问题 #

你写的getItem函数没有返回AsyncStorage.getItem()生成的Promise，所以调用getItem()时会得到undefined。同时，console.log(teste, " final")是同步代码，会在then里的异步回调之前执行，这就是日志顺序颠倒且值为undefined的原因。

第二个代码示例的问题 #

const value = AsyncStorage.getItem(...).then(...)中，value其实是AsyncStorage.getItem()返回的Promise对象（不是实际的存储值），因为then是异步执行的，所以同步的console.log(value, " second")会先打印Promise的内部状态，之后then里的回调才会执行并输出实际值。

正确实现方式 #

完全可以只用then方法获取数据，关键是要正确处理Promise的链式调用：

1. 让getItem返回Promise #

const getItem = (key) => {  
  // 必须返回AsyncStorage.getItem的Promise，才能让调用方链式调用then
  return AsyncStorage.getItem(key).then(value => {
    console.log(value, " first");
    return value; // 将值传递给下一个then
  });
};

2. 在调用时通过then处理结果 #

const test = () => {
  // 调用getItem后，在then回调中处理异步返回的值
  getItem("access_token").then(teste => {
    console.log(teste, " final");
  });
};

这样执行后，日志顺序会是：

LOG  00b3ceb97ae8d9357abd1065f50be408a9389f23  first
LOG  00b3ceb97ae8d9357abd1065f50be408a9389f23  final

关键要点 #

• AsyncStorage的所有操作都是异步的，返回的是Promise对象，必须通过then（或async/await）处理结果
• 依赖异步结果的代码必须放在then回调中，不能直接在同步代码里访问
• 要让函数能被链式调用，必须返回Promise对象

内容的提问来源于stack exchange，提问作者Cristian Favaro Carriço