在博览会上使用打字稿调用异步函数返回承诺对象答案

【问题标题】：Calling async function returning promise object using typescript on expo在博览会上使用打字稿调用异步函数返回承诺对象
【发布时间】：2020-07-10 11:08:40
【问题描述】：

根据 activeStorage 上设置的条件，尝试在 typescript expo 上返回不同的函数（带有视图）。

如果您查看代码，当 showIntro 被调用时，我想显示从 getScreen 返回的值，但是，当我控制台日志时，它返回一个承诺对象

当我在getScreen 中控制台记录await AsyncStorage.getItem('showIntro'); 时，它给了我价值。不知道是bug还是代码有问题？

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

const data = [{...}, {...}, {...}]

const getScreen = async () => {
  return await AsyncStorage.getItem('showIntro'); 
}

function App() {
  const [showIntro, updateShowIntro] = React.useState(getScreen());

  const onDone = () => {
     AsyncStorage.setItem('showIntro', false).then(()=>{});
     updateShowIntro(false);
  }

  return (
  { (showIntro) ? (
      <AppIntroSlider
        renderItem={renderItem}
        data={data}
        onDone={onDone}/>
      ) : (
        <ShowApp />
      )
    }
  );
 }

【问题讨论】：

标签： javascript typescript async-await expo asyncstorage

【解决方案1】：

您的getScreen 返回Promise，因为您使用的是async/await。您需要做的是，当您的组件第一次在 React.useEffect 挂钩内加载时调用 getScreen，然后在它解析为您期望的任何值后更新您的 showIntro 状态。

使用async/await 函数“等待”AsyncStorage.getItem("showIntro") 在返回之前以某个值解析实际上没有任何效果 - 您仍在处理一旦“内部”Promise 完成就解析的Promise。

来自 MDN：

return 值是一个 Promise，它将使用异步函数返回的值进行解析，或者由于异步函数抛出或未捕获的异常而被拒绝。

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

const data = [{...}, {...}, {...}]

// no need for `async/await` here, using `async/await`
// turns your `getScreen` function into a `Promise`, 
// you get the same exact result, so you might as well 
// call your `AsyncStorage.getItem("showIntro")` function
// directly in the `React.useEffect` hook rather than
// through this `getScreen` function
const getScreen = () => {
  return AsyncStorage.getItem("showIntro");
}

function App() {
  const [showIntro, updateShowIntro] = React.useState(null);

  React.useEffect(() => {
    getScreen()
      .then(result => {
        updateShowIntro(result);
      });
      .catch(/* handle errors appropriately */);

    // alternatively, just call `AsyncStorage.getItem("showIntro")` here
    // AsyncStorage.getItem("showIntro")
    //   .then(result => { updateShowIntro(result); })
    //   .catch(/* handle errors appropriately */);
  }, []);

  const onDone = () => {
     // should `updateShowIntro` be inside `then`?
     AsyncStorage.setItem('showIntro', false)
       .then(() => {
         updateShowIntro(false);
       })
       .catch(/* handle errors appropriately */);
  }

  return showIntro ? (
    <AppIntroSlider
      renderItem={renderItem}
      data={data}
      onDone={onDone}
    />
  ) : (
    <ShowApp />
  );
 }

参考资料：

async function - MDN

【讨论】：