我有一个axios呼叫的请求拦截器。它检查我的jwt令牌,并在必要时调用刷新
axios.interceptors.request.use((配置)=>{
const state=store.getState();//获取更新状态
const time=Math.floor(新日期().getTime()/1000);
如果(
!state.app.jwtRefreshOnRequest
&;&;time>;=state.jwt.expires-120
&;&;state.jwt.refresh_在>;时间之前
){//2分钟后到期。刷新
//分派({type:'JWT\u REFRESH\u REQUEST'});
get(API\u BASE\u URL+'/auth/refresh')
.然后(功能(响应){
//分派({type:'JWT_REFRESH_SUCCESS',负载:response.data});
axios(配置)。然后(解析、拒绝);
})
.catch(函数(err){
拒绝(错误);
});
}
返回配置;
});
此代码正确调用刷新并保存新令牌,但原始调用在拦截器请求完成之前不会保持,因此使用过期令牌
所以,我想我需要从拦截器进行同步调用
避免对HTTP请求进行同步调用,因为它们只会使应用程序挂起
这里需要做的是使调用代码异步化——任何回调、承诺或异步相关的一般规则都是,一旦异步化,所有内容都需要异步化
这里,axios.get返回一个Promise——一个跟踪异步HTTP请求并在请求完成后解析的对象。您需要返回它,而不是config
我们通过返回一个新的承诺——如果需要一个新令牌的HTTP请求,它将等待它,如果没有,它可以立即解析
axios.interceptors.request.use(配置=>;
新承诺((解决、拒绝)=>{
//…你的代码。。。
get(API\u BASE\u URL+'/auth/refresh')
。然后(响应=>{
//从响应中获取您的配置
const newConfig=getConfigFromResponse(响应);
//兑现诺言
解析(newConfig);
},拒绝);
//或者,当您不需要HTTP请求时,只需解决
解析(配置);
})
});
每当你看到时,你就在处理承诺,一旦你看到一切都需要返回一个承诺
如果您可以使用async/wait-现代浏览器支持的新关键字,并且如果您需要支持旧用户,则可以使用透明关键字,这将变得更加容易。有了这些,您只需将Promise调用与wait关键字内联即可
axios.interceptors.request.use(异步配置=>;
//…你的代码。。。
如果(/*我们需要获取异步令牌*/){
const response=wait axios.get(API_BASE_URL+'/auth/refresh');
config=getConfigFromResponse(响应);
}
返回配置;
});