Reactjs 预取块内的redux api同步操作

我正在react.js中编写SPA，并使用redux api处理后端连接。我想在执行主操作之前执行一个同步操作以刷新身份验证令牌；这样，每次对后端执行操作时，我都会确保令牌有效

const endpoints = {
 {
   url: '/some/url',
   crud:true,
   prefetch:[
     ({actions, dispatch, getState}, cb) =>{
       actions.auth_token.post(JSON.stringify({
         token: "my token",
         refreshToken: "my_refresh_token"
       }),null, (err, data) =>{
           if(err){
             // HANDLE ERROR
           }
           setToken(data)
       })
     }
   ]
 }
}

const api = reduxApi(endpoints)

如何以同步方式调用预取函数？那么首先是令牌刷新，然后是操作

编辑 我们可以异步完成这些工作，重要的是对cb（）的最终调用，下面是示例

const endpoints = {
 {
   url: '/some/url',
   crud:true,
   prefetch:[
     ({actions, dispatch, getState}, cb) =>{
        let mills = new Date().getTime()
        const { token, generationTime, accessTokenLife, refreshTokenLife, refreshToken } = localStorage
        // Conditions: exixts token, it is expired, refresh token is not expired
        if(token && generationTime + accessTokenLife - 500 < mills && generationTime + refreshTokenLife - 500 > mills){

        dispatch(actions.token_refresh.get(null, null, (err, data) =>{
        if(err){
           dispatch(setError(err))
        }else{
           refreshTokenData(data)
        }
        cb()
       }))    
   }else{
    cb()
  }
 }
 ]}}

const api = reduxApi(endpoints)

const端点={
{
url:“/some/url”，
克鲁德：没错，
预取：[
（{actions，dispatch，getState}，cb）=>{
设mills=new Date（）.getTime（）
const{token，generationTime，accessTokenLife，refreshtTokenLife，refreshtToken}=localStorage
//条件：exixts令牌，已过期，刷新令牌未过期
if（令牌和生成时间+访问令牌寿命-500mills）{
分派（actions.token\u refresh.get（null，null，（err，data）=>{
如果（错误）{
调度（设置错误（err））
}否则{
刷新令牌数据（数据）
}
cb（）
}))    
}否则{
cb（）
}
}
]}}
常量api=reduxApi（端点）

您可能不需要每次执行异步操作时都请求令牌。事实上，我鼓励你不要这样做

您可以在对用户进行身份验证并使用缓存时请求令牌。现在，您不必在每次需要时发送网络请求来检索用户令牌，只需检查浏览器缓存的存储即可。如果用户的令牌存在，则用户已成功进行身份验证。否则，用户尚未登录，您可以将用户重定向到身份验证页面

因为这实际上不是对你问题的回答，而是解决你问题的另一种方式，所以我也将以更符合问题的方式回答你的问题。您应该能够利用请求用户的令牌，然后一旦解决，就可以执行任何其他操作

我将以一种与reduxapi无关的抽象方式解释，您应该能够很容易地适应reduxapi特定的构造

const actionOne = () => {
   actions.post(myJson)
     .then(response => actionTwo(response))
     .catch(error => console.log(error))
}

---

您需要进行的一个重要修改是将

actions.auth_token.post

转换为返回承诺。然后你可以将其他行动与承诺的解决联系起来。如果你不熟悉承诺，MDNs是相当好的。有关将函数从回调转换为承诺的详细信息，此堆栈溢出非常详细。

您可能不需要每次执行异步操作时都请求令牌。事实上，我鼓励你不要这样做

您可以在对用户进行身份验证并使用缓存时请求令牌。现在，您不必在每次需要时发送网络请求来检索用户令牌，只需检查浏览器缓存的存储即可。如果用户的令牌存在，则用户已成功进行身份验证。否则，用户尚未登录，您可以将用户重定向到身份验证页面

因为这实际上不是对你问题的回答，而是解决你问题的另一种方式，所以我也将以更符合问题的方式回答你的问题。您应该能够利用请求用户的令牌，然后一旦解决，就可以执行任何其他操作

我将以一种与reduxapi无关的抽象方式解释，您应该能够很容易地适应reduxapi特定的构造

const actionOne = () => {
   actions.post(myJson)
     .then(response => actionTwo(response))
     .catch(error => console.log(error))
}

---

您需要进行的一个重要修改是将

actions.auth_token.post

转换为返回承诺。然后你可以将其他行动与承诺的解决联系起来。如果你不熟悉承诺，MDNs是相当好的。有关将函数从回调转换为承诺的详细信息，此堆栈溢出非常详细。

Hi！谢谢你的回答。在这个例子中，我想制作一个SSCCE来指出问题所在，在developmenteEnv中，我得到一个令牌，并在它过期之前刷新它。在任何情况下，我都找到了解决方案：我可以使用异步操作，一旦成功或出错，我必须调用cb（）函数。就这样！你好谢谢你的回答。在这个例子中，我想制作一个SSCCE来指出问题所在，在developmenteEnv中，我得到一个令牌，并在它过期之前刷新它。在任何情况下，我都找到了解决方案：我可以使用异步操作，一旦成功或出错，我必须调用cb（）函数。就这样！