Как выполнять запросы один за другим в useEffect
У меня есть useEffect, который выполняет запрос при изменении зависимостей (отдел и два поля дат).
useEffect(() => {
getFilteredRestReport({
date_start: formatDatePatchPoint(date[0]),
date_end: formatDatePatchPoint(date[1]),
department,
});
}, [date, department])
Когда я делаю запрос с пустым отделом, запрос выполняется долго, и если во время этого запроса я делаю запрос, например, для какого-то отдела, то он будет выполнен сначала, чем без отдела, но потом, когда загружается запрос без отделов, он заменит данные, хотя в фильтре спереди у меня выбран последний отдел запроса. И вопрос в том, как остановить ненужный запрос, или как выполнять запросы по одному?
Я пытался сделать это с помощью async/await
const request = async () => {
await getFilteredRestReport({
date_start: formatDatePatchPoint(date[0]),
date_end: formatDatePatchPoint(date[1]),
department,
});
};
useEffect(() => {
request()
}, [date, department]);
вы можете подождать несколько секунд с помощью setTimeout, прежде чем отправлять http-запрос.
@schnondle, можешь написать пример?
@ммм, я думаю, это ухудшает пользовательский опыт
конечно, вы должны сообщить об этом пользователю во время ожидания.
Что делает getFilteredRestReport при вызове? По сути, это звучит так, как будто вам нужно интегрировать AbortController и прерывать любые текущие запросы при выполнении следующего запроса. Пожалуйста, отредактируйте свое сообщение, включив в него полный минимально воспроизводимый пример соответствующего кода, с которым вы работаете.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Зная, что это функция asyncThunk, можно узнать из следующей документации. Это должно работать:
useEffect(() => {
const reportPromise = getFilteredRestReport({
date_start: formatDatePatchPoint(date[0]),
date_end: formatDatePatchPoint(date[1]),
department,
});
return () => {
reportPromise.abort();
}
}, [date, department])
getFilteredRestReport свою функцию createAsyncThunk, и я пишу ответ на состояние редукции, а затем использую это состояние в компоненте
О, при использовании функции createAsyncThunk вам нужна диспетчеризация для ее вызова, это делается с помощью диспетчеризации = useDispatch(), а затем вам нужно отправить функцию диспетчеризации asyncthunk(getFilteredRestReport({params})), если это все еще не выполняется. работа, у меня тоже должно быть решение для этого!
да, я знаю это, я использую bindActionCreators из redux, чтобы использовать такие действия, как функции поддержки.
Я не уверен, разрешено ли это, но, может быть, вы можете вызывать их как асинхронные функции? Например, создайте для каждого свою собственную асинхронную функцию и ожидайте их запуска, чтобы вы знали, что они завершены, прежде чем продолжить.