【问题标题】:Dispatch action after some elapsed period经过一段时间后的调度操作
【发布时间】:2017-05-05 07:08:55
【问题描述】:
所以我是第一次使用 React 和 Redux。在我的应用程序中,我使用第三方 API 来获取数据等,这方面一切都很好。然而,像大多数受保护的 API 一样,我需要获取一个短暂的令牌来向 API 发出请求,我想在某种事件上设置一个计时器,以便我可以在后台刷新我的令牌。做这个的最好方式是什么?令牌会过期,因此我可以设置一个计时器,在令牌到期前几分钟获取新令牌。
【问题讨论】:
标签:
reactjs
redux
react-redux
【解决方案1】:
您可以做的是将您获得的令牌保存为具有过期期限的 cookie,然后使用setInterval 函数设置计时器以监视 cookie。 cookie 过期后会自动从浏览器中删除并返回 undefined,因此您可以再次进行 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);
设置Cookie
var s = new Date(0);
s.setUTCSeconds(exp);
cookie.save(key,value, {expires: s});
【解决方案2】:
我想出的第一个解决方案是嵌套 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
});
【解决方案3】:
您可以走无状态路线并始终使用您拥有的任何令牌查询 API 并处理未经授权的响应吗?
您将需要在某些时候处理未经授权的响应,这样这两种情况都可以解决。
也许包装您的 axios 调用会启用此功能?