私は初めてReactとReduxで遊んでいます。私のアプリでは、データをフェッチするためにサードパーティのAPIを使用しています。しかし、ほとんどの保護されているAPIのように、APIに対してリクエストを行うために短いトークンをフェッチする必要があるので、バックグラウンドでトークンを更新できるように、何らかのイベントにタイマーを設定したい。これを行う最善の方法は何ですか？トークンには有効期限がありますので、トークンの有効期限の数分前に新しいトークンを取得するようにタイマーを設定できます。いくつかの経過時間の後の派遣アクション
何ができるかは、有効期限を使用すると、クッキーとして取得したトークンを保存しsetInterval機能を使ってクッキーを監視するタイマーを設定しています。クッキーは、自動的にあなたは、この目的のために
import cookie from 'react-cookie';
react-cookieを使用することができます
をするとすぐにその有効期限を乗り越えるなどのブラウザから削除され、それがundefinedを返しますので、あなたは再びAPI呼び出しを行うことができます
タイマー
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});
私が思いついた最初の解決策は、約束を入れ子にすることですが、それは最善の解決策ではないかもしれません。
まずトークンを要求し、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
});
あなたは、ステートレスルートに行くことができ、あなたはどのトークンを持っていても常にAPIに照会し、不正な応答を処理できますか？
ある時点で不正な応答を処理する必要があります。そうすれば、両方の問題が解決されます。
おそらくaxiosの呼び出しをラップするとこれが有効になりますか？
私はこの1つが好きで、それにショットをつけて報告するつもりです – Lutando
あなたに質問があれば教えてください –