在 React Native 中使用 AsyncStorage 检查 Json Web Token答案

【问题标题】：Using AsyncStorage to check Json Web Token in React Native在 React Native 中使用 AsyncStorage 检查 Json Web Token
【发布时间】：2016-12-07 03:12:26
【问题描述】：

所以在我的 react-native 项目中出现了一个非常常见的情况：在路由器挂载之前检查用户是否有 JWT(Json Web Token) 用于身份验证。

在 React 中很容易：

const token = localStorage.getItem()
if (token !== null) store.dispatch(checkTokenSuccess())

但是 react-native 使用 AsyncStorage 而不是 localStorage，异步特性让我非常困扰。我不能在 App 组件中使用 async-await，因为任何带有 async 关键字的函数都会返回一个 Promise 而不是一个 React 组件。

这是我的代码，显然它已经坏了：

AsyncStorage.getItem('JWT')
  .then((jwt) => {
    if (jwt !== null) {
      store.dispatch(checkJwtSuccess());
    }
  });

const App = () => (
  <Provider store={store}>
    <MainRouter />
  </Provider>
);

应用总是在获取 jwt 之前呈现。

如何让应用组件（我整个应用的根）等到 jwt fetch promise 解决？

编辑：

正如@zerkms 所指出的，JavaScript 不会阻塞。那么我能想到的唯一解决方案就是将 App 变成一个 React 类并使用componentWillMount()，但这会使App 组件变得笨拙。有更好的解决方案吗？

【问题讨论】：

await 不会阻塞，因此它的工作方式与您实现的完全一样。
@zerkms 感谢您的评论！但是那么等待的目的是什么？而且，假设我想在这里阻止，我应该采取什么方法？
你的checkJWT 没有做任何太有用的事情，它完全等同于const checkJWT = () => AsyncStorage.getItem('bappoJWT');。
你如何使用App？
是的，通过让 Provider 组件进行条件渲染，仅在 store 填满时渲染路由器，这听起来是个好主意。这会工作的，谢谢伙计。

标签： javascript react-native es6-promise

【解决方案1】：

AsyncStorage 需要 2 个参数，errorCallback 和 value，你必须这样写你的代码

AsyncStorage.getItem("key",(err,value)) => {
   if(!err){
       console.log(value);
   }
});

【讨论】：

这似乎不是正确的语法。在此处查看官方文档facebook.github.io/react-native/docs/asyncstorage.html。
其实还是不正确。第一个参数应该是键，然后是回调函数。
当我写“值”时，我指的是你的字符串值，我认为它非常清楚......
这是回调函数的参数；该值应该是getItem() 函数的第一个参数
@StanleyLuo 是对的。应该是AsyncStorage.getItem('key', (err, result) => {});