Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ajax/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Axios请求拦截器等待ajax调用完成_Javascript_Ajax_Axios - Fatal编程技术网

Javascript Axios请求拦截器等待ajax调用完成

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呼叫的请求拦截器。它检查我的jwt令牌,并在必要时调用刷新

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
。在这个答案中,它只是一个占位符。