前端之家

  1. 首页
  2. 问答

Axios承诺根据飞行前请求响应进行解析，这会使关联的GET与其他应用程序乱序执行

• 问答

美好的一天，

我正在开发一个使用React-Redux（带有Thunk）和Axios的React应用。

我有一个我分派的操作，该操作进行了已认证的API调用。由于我在跨域请求中具有“授权”标头，因此存在飞行前请求。

我遇到的问题是，一旦飞行前请求返回，而不是在关联的GET请求返回时，Axios似乎正在运行.then（）代码。这将导致在API GET请求的结果返回之前，Reducer函数处于更新状态。

我添加了一些console.logs以提供更多细节来说明问题。如您所见，飞行前请求在第一个条目中发送。 .then执行一个预检请求，返回200。然后执行该操作，然后reducer更新状态。我的应用通过重新渲染连接到Redux的容器作为响应。然后，子组件也会更新。然后GET请求完成并返回200。由于在以前提到的.then（）上已经对reducer进行了更新，因此此时不再发生任何事情。

操作代码如下所示。我没有粘贴所有其他代码，因为有许多文件，它们相对较大。如果需要，我也可以包括这些内容。

Axios承诺根据飞行前请求响应进行解析，这会使关联的GET与其他应用程序乱序执行

export const updatePlotDataInit = (datasetName,tableName,xFieldName,yFieldName,chartId,chartType,plotId,newDomainStartDbIndex,newDomainEndDbIndex) => {
        console.log('[actions/plot.js.js] - [updatePlotDataInit] - [start of function]');
    return dispatch => {
        dispatch(updatePlotDataStart());
        console.log('[actions/plot.js.js] - [updatePlotDataInit] - [just before api request]');
        instance.get( // custom axios instance with extra auth header used here
            `/v1/datasets/${datasetName}/tables/${tableName}/fields/data?xField=${xFieldName}&yField=${yFieldName}&chartType=${chartType}&domainStart=${newDomainStartDbIndex}&domainEnd=${newDomainEndDbIndex}`
            )
            .then(response => {
                console.log('[actions/plot.js.js] - [updatePlotDataInit] - [in .then before updatePlotDataSuccess]');
                // dispatch redux action for success case
                const currentLevel = response.data.metaData.current_level 
                const data = response.data.queryData.data //schema is available too
                //datasetId,tableId,xFieldId,xField,yFieldId,yField,plotIdVal,currentLevel,data
                dispatch( updatePlotDataSuccess( plotId,data ) );
                // console.log(response);
                console.log('[actions/plot.js.js] - [updatePlotDataInit] - [in .then after updatePlotDataSuccess]')
            })
            .catch(error => {
                console.log(error);

            // dispatch redux action for failure case
            dispatch(updatePlotDataFail(error));
            })
    }
};

我不确定，但似乎Axios认为成功的飞行前响应适合解决Promie，因此.then被执行。

似乎是这样吗？如果是这样，我将如何强制Axios在解决诺言之前等待GET / POST / PUT / etc成功？

感谢您的帮助。

www_melody 回答：Axios承诺根据飞行前请求响应进行解析，这会使关联的GET与其他应用程序乱序执行

我知道这是很久以前的事了，但我认为它可能对发现此问题与他们的问题类似但没有答案的其他人有用...

对我来说这只是因为粗心的编码：D， 这是我的响应接收器，我在 Promise.resolve(axios(originalRequest)); 之前错过了“返回”； 我通过添加 return 来解决它：

AxiosInstance.interceptors.response.use(
    (response) => {
        return response;
    },function (error) {
        const originalRequest = error.config;
        let refreshToken = localStorage.getItem("refreshToken");
        if (
            refreshToken &&
            error.response.status === 401 &&
            !originalRequest._retry
        ) {
            originalRequest._retry = true;
            return axios
                .post(apiUrl + `auth/refreshtoken`,{ refreshToken: refreshToken })
                .then((res) => {            
                    if (res.status === 200) {
                        localStorage.setItem("accessToken",res.data.accessToken);
                        console.log("Access token refreshed!" + res.data.accessToken);       
                        originalRequest.headers.Authorization = 'Bearer ' + res.data.accessToken;
         //*************** I just return promise.resolve *****************//
                        return Promise.resolve(axios(originalRequest)); 
                    }
                }).catch((error) => {
                    console.log(error);
                });

        }
        return Promise.reject(error);
    }
axioses6-promisereact-reduxreactjsredux-thunk
本文链接：https://www.f2er.com/2809477.html

大家都在问