🚜И снова про race conditions

Я уже писала про то, как частые запросы на сервер (например, при вводе поисковой строки) могут вызывать race conditions. Однако мы тогда не говорили о том, что сигнал аборт контроллера может сработать после успешного запроса, но до установки данных. Это возможно за счет того, что движок вызывает асинхронные функции не сразу, а только после завершения некоторого события (например, получения ответа от сервера).

Поэтому, когда вы пишете await или then, помните про то, что между кодом до await и после может вклиниться какой-то другой код, который может заабортить ваш сигнал 🙂 Например, в примере ниже до await(loadAsyncWork(data)); наш сигнал, который мы получаем снаружи, может быть еще не aborted, а вот после await(loadAsyncWork(data)); — уже да:


async function loadData({signal, setData}) {
const res = await fetch(`/api/data?query=${query}`, { signal }) // здесь сигнал еще не aborted
const data = await res.json();
await loadAsyncWork(data); // операция выполняется долго, движок в это время может выполнять другие функции

setData(data) // а вот здесь уже aborted
}

Если для нас важна актуальность данных (мы всегда хотим отображать только самые актуальные данные с сервера), то в этом случае мы должны дополнительно проверить сигнал перед вставкой:


async function loadData({signal, setData}) {
const res = await fetch(`/api/data?query=${query}`, { signal })
const data = await res.json();
await loadAsyncWork(data);

if (!signal.aborted) {
setData(data)
}

}

#raceconditions

🔜 Канал в MAX