Javascript 使用AsyncStorage检查React Native中的Json Web令牌

因此，在我的react原生项目中有一个非常常见的情况：在安装路由器之前，检查用户是否具有用于身份验证的JWT（Json Web令牌）

反应很容易：

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

但是react native使用

AsyncStorage

而不是

localStorage

，异步特性让我非常烦恼。我不能在

App

组件中使用async wait，因为任何带有

async

关键字的函数都将始终返回承诺，而不是react组件

这是我的密码，显然，它坏了：

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

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

AsyncStorage.getItem（'JWT'））
.然后（（jwt）=>{
如果（jwt！==null）{
store.dispatch（checkJwtSuccess（））；
}
});
常量应用=（）=>(
);

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

如何让应用程序组件（我整个应用程序的根）等待jwt fetch承诺解决

编辑：

---

正如@zerkms所指出的，JavaScript不会阻塞。然后我能想到的唯一解决方案是将应用程序转换为React类并使用

componentWillMount（）

，但这会使

App

组件变得笨拙。有更好的解决方案吗？

异步存储需要两个参数，

errorCallback

和

value

，您必须以这种方式编写代码

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

---

await

不会阻塞，因此它的工作原理与您实现的完全相同。@zerkms感谢您的评论！但是等待的目的是什么呢？假设我想在这里阻塞，我应该采取什么方法？您的

checkJWT

没有做任何太有用的事情，它完全等同于

const checkJWT=（）=>AsyncStorage.getItem（'bappoJWT'）

。如何使用

应用程序

？是的，让提供者组件进行条件渲染听起来是个不错的主意，只在存储区填满时渲染路由器。这会有用的，谢谢，伙计。这似乎不是正确的语法。查一下这里的官方文件，实际上还是不正确。第一个参数应该是key，然后是回调函数。当我写“value”时，我指的是你的字符串值，我认为它非常清楚…这是回调函数的参数；该值应该是

getItem（）

function@StanleyLuo这是对的。它应该是

AsyncStorage.getItem（'key'，（err，result）=>{}）