Javascript Axios请求拦截器等待ajax调用完成
我有一个axios呼叫的请求拦截器。它检查我的jwt令牌,并在必要时调用刷新Javascript Axios请求拦截器等待ajax调用完成,javascript,ajax,axios,Javascript,Ajax,Axios,我有一个axios呼叫的请求拦截器。它检查我的jwt令牌,并在必要时调用刷新 axios.interceptors.request.use((config) =>{ const state = store.getState(); // get renewed state const time = Math.floor( new Date().getTime() / 1000 ); if( ! state.app.jwtRefreshOnRequ
axios.interceptors.request.use((config) =>{
const state = store.getState(); // get renewed state
const time = Math.floor( new Date().getTime() / 1000 );
if(
! state.app.jwtRefreshOnRequest
&& time >= state.jwt.expires - 120
&& state.jwt.refresh_before > time
){ // expiring in 2 min. refresh
//dispatch({type: 'JWT_REFRESH_REQUEST'});
axios.get( API_BASE_URL + '/auth/refresh')
.then(function(response){
// dispatch({type: 'JWT_REFRESH_SUCCESS', payload: response.data});
axios(config).then(resolve, reject);
})
.catch(function(err){
reject(err);
});
}
return config;
});
此代码正确调用刷新并保存新令牌,但原始调用在拦截器请求完成之前不会保持,因此使用过期令牌
所以,我想我需要从拦截器进行同步调用 避免对HTTP请求进行同步调用,因为它们只会使应用程序挂起 这里需要做的是使调用代码异步化——任何回调、承诺或异步相关的一般规则都是,一旦异步化,所有内容都需要异步化 这里,
axios.get
返回一个Promise
——一个跟踪异步HTTP请求并在请求完成后解析的对象。您需要返回它,而不是config
我们通过返回一个新的承诺
——如果需要一个新令牌的HTTP请求,它将等待它,如果没有,它可以立即解析
axios.interceptors.request.use(config =>
new Promise((resolve, reject) => {
// ... your code ...
axios.get( API_BASE_URL + '/auth/refresh')
.then(response => {
// Get your config from the response
const newConfig = getConfigFromResponse(response);
// Resolve the promise
resolve(newConfig);
}, reject);
// Or when you don't need an HTTP request just resolve
resolve(config);
})
});
每当你看到时,你就在处理承诺
,一旦你做到了,一切都需要返回一个承诺
如果您可以使用async
/await
-现代浏览器支持的新关键字,如果您需要支持传统用户,则可以使用透明关键字,这样做会容易得多。有了这些,您只需将Promise
调用与wait
关键字内联即可
axios.interceptors.request.use(async config =>
// ... your code ...
if(/* We need to get the async token */) {
const response = await axios.get( API_BASE_URL + '/auth/refresh');
config = getConfigFromResponse(response);
}
return config;
});
不清楚getConfigFromResponse(response)的作用是什么???@ace它将response
对象转换为config
格式-这不是问题的一部分,因此实现取决于您。它可以是await response.json()
,假设状态为ok,并添加外部await
。在这个答案中,它只是一个占位符。