Добрый день,
Я работаю над приложением React, которое использует React-Redux (с Thunk) и Axe ios.
У меня есть действие, которое я отправляю, которое делает аутентифицированный вызов API. Из-за того, что у меня есть заголовки авторизации в запросе перекрестного источника, существует запрос перед полетом.
Проблема, которая у меня есть, заключается в том, что Ax ios, кажется, выполняет .then () код, как только возвращается предполетный запрос, а не когда возвращается связанный запрос GET. Это приводит к обновлению состояния функции Reducer до того, как возвращаются результаты запроса API GET.
Я добавил несколько console.logs, чтобы дать более подробную информацию для иллюстрации проблемы. Как видите, предварительный запрос отправляется в первой записи. .Hen выполняет один запрос перед полетом, возвращается с 200. Затем действие запускается, и редуктор обновляет состояние. Мое приложение отвечает повторным рендерингом контейнера, который был подключен к Redux. Затем дочерние компоненты также обновляются. Затем запрос GET завершается и возвращается с 200. И в этот момент ничего больше не происходит, потому что редуктор уже был обновлен в предыдущем .then (), упомянутом выше.
Код действия показан ниже. Я не вставил весь другой код, так как есть несколько файлов, и они относительно большие. При необходимости я могу включить их тоже.
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, chartId, plotIdVal, currentLevel, data
dispatch( updatePlotDataSuccess( plotId, currentLevel, 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));
})
}
};
Я не совсем уверен, но кажется, что Ax ios считает успешный предполётный ответ подходящим для разрешения выпусков ie и, следовательно, затем исполняется.
Кажется ли это так? И если да, то как мне заставить Ax ios ждать, пока GET / POST / PUT / et c завершится успешно, прежде чем выполнить обещание?
Любая помощь приветствуется.