经过一段时间后调度动作

Question

所以我是第一次接触 React 和 Redux。在我的应用程序中，我正在使用第三方 API 来获取数据等等，在这方面一切都很好。然而，像大多数受保护的 APIs 我需要获取一个短暂的令牌来向 API 发出请求，我想在某种事件上设置一个计时器，以便我可以在后台刷新我的令牌.做这个的最好方式是什么？令牌会过期，因此我可以设置一个计时器，在令牌过期前几分钟获取新令牌。

Answer 1

我想到的第一个解决方案是嵌套 promise，但这可能不是最好的解决方案。

首先请求您的令牌，然后在 then 回调中请求真实数据。

使用 axios 会是这样的：

axios.get('/my/token/path/')
.then(() => {
    axios.get('/my/real/data/path')
    .then(() => {
         // do something with data...
    }
}

为此请求添加捕获。如果令牌如您所说有到期日期，您可以保存它并创建某种条件来检查该日期是否未过期并根据该条件请求新令牌或获取现有令牌。

伪代码示例：

function getTokenPromise() {
    if ('cookie with token exists') return Promise.resolve('my token from cookie');

    return axios.get('/my/token/path/');
}

// somewhere else in the code

getTokenPromise().then(() => {
    //do something with data
});

Answer 2

你可以做的是将你得到的token保存为一个有有效期的cookie，然后使用setInterval函数设置定时器来监控cookie。一旦过期并且 returns 未定义，cookie 会自动从浏览器中删除，因此您可以再次调用 API

您可以使用 npm 包 react-cookie 来达到这个目的

import cookie from 'react-cookie';

定时器

setInterval(function() {
   var  getCookie = cookie.load('token');

   if(getCookie === undefined) {
      // send an API fetch request here
  } 
}, 10000);

SetCookie

var s = new Date(0); 
 s.setUTCSeconds(exp);
 cookie.save(key,value, {expires: s});

Answer 3

您可以走无状态路线并始终使用您拥有的任何令牌查询 API 并处理未经授权的响应？
您有时需要处理未经授权的响应，这样可以解决这两种情况。

也许包装您的 axios 调用会启用此功能？

经过一段时间后调度动作

Dispatch action after some elapsed period

reactjs

redux

react-redux