为什么React Native中AsyncStorage的getItem返回Promise且输出顺序异常？

原因解答 #

1. c日志最先输出的原因 #

• 所有带async关键字的函数都是异步函数，函数内部遇到await时会暂停执行，先让出主线程执行同步代码，异步操作的结果会进入事件队列等待主线程空闲后再执行。
• 你代码中的console.log('c',thing,'c')是同步执行代码，而storeData、getData内部的AsyncStorage读写属于异步IO操作，执行优先级低于同步代码，所以c的日志会先打印，之后才会执行a、b对应的日志逻辑。

2. 打印出Promise结构的原因 #

• 异步函数调用后不会直接返回你写的return值，而是会返回一个Promise实例，你打印的thing就是这个处于未完成状态的Promise对象。你看到的_U/_V/_W/_X是React Native JS引擎内部标记Promise状态的私有属性：
  • _U：Promise状态，0代表pending（待完成），1代表fulfilled（成功），2代表rejected（失败）
  • _V：Promise成功后携带的返回值
  • _W：Promise失败后携带的错误信息
  • _X：Promise绑定的回调队列
• 打印c的时候getData还没有执行完成，所以Promise处于pending状态，就输出了你看到的结构。

修复建议 #

要拿到getData返回的语言值，你需要通过await或者Promise.then的方式获取异步结果，示例如下：

// 方式1：使用await（需要放在async函数内部）
const initLanguage = async () => {
  await storeData();
  const thing = await getData();
  console.log('c', thing, 'c'); // 此处可正常输出语言值
}
initLanguage();

// 方式2：使用.then回调
storeData().then(() => {
  getData().then(thing => {
    console.log('c', thing, 'c');
  })
})

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