4 способа побороть Race Condition

Рет қаралды 10,352

Күн бұрын

Пікірлер: 86

@virtual5754 9 ай бұрын

Где-то была статья от автора react query, где он описывает все возможные сложности, которые возникают при самом простом сетевом запросе и сохранении результата в стейт. Если коротко, то race condition там далеко не единственная возможная проблема, и в результате нужна целая стена текста для обработки всех ситуаций. Почему он и сделал эту библиотеку - чтобы делать все это одним хуком вместо стены текста.

@it-sin9k 9 ай бұрын

Звучит как крутая статья) почитал бы)

@stanislavw9709 9 ай бұрын

Сбросьте ссылку на статью, пожалуйста :)

@MikeNugget 9 ай бұрын

Common Patterns and Nuances Using React Query

@testtestable8358 8 ай бұрын

фактанул

@АлександрКасатов 9 ай бұрын

А еще есть старое доброе поле ввода без дурацких отвлекающих подсказок, и с отдельной кнопкой поиска (и по enter разумеется). Никаких гонок, никакого дрочения сервера ненужными запросами) Очень раздражает, когда поле ввода пытается за меня решить, что же мне нужно) Такое ощущение, что когда увидели ajax впервые, обрадовались, что не надо отправлять форму и перезагружать страницу, и присобачили его везде где надо и не надо) Это ни в коем случае не наезд на видео, ибо видео как обычно полезное и нужное. Просто высказал мнение по поводу автоподсказок в инпуте - мне они не нравятся со всех точек зрения - пользователя, фронтенд- и бэкенд-разработчика)

@MrZorg23 8 ай бұрын

Спасибо! Очень полезное видео!

@boldureans 9 ай бұрын

Саш привет! Спасибо за видео. В react-query, queryFn пробрасывает параметр signal. Так что если у вас уже есть клиентская абстракция над rest типа: post(url, data) => (signal) => {...} то все запросы будут отменяться, это очень удобно для юзеров с медленным интернетом. По умолчанию все запросы доводятся до конца, что иногда слишком, если учитывать что юзер на ту страничку не вернётся и кликнул её случайно. И кстати, наверное new AbortController скорее должен быть один, при той же настройки axios instance. его же можно потом абортить из любой точки.

@it-sin9k 9 ай бұрын

Про useQuery планирую записать отдельное видео)

@alexs7931 9 ай бұрын

Главное не отмеить таким образом получение скидки по промокоду , или любое другое действие которое должно 100% прийти обратно клиенту(если конечно стейт не хранится на сервере , тогда купон не пропадет) 🤗 А кто ведет логи отмены запросов кстати?

@boldureans 9 ай бұрын

@@alexs7931 Клиент, конечно) Так отмена запросов в основном когда происходит внезапный unmount (быстро переключая табы, например). Если запросить промокод и уйти с экрана, то спрашивается нужен ли он на новом?)

@СергейКривошеев-т1ж 9 ай бұрын

Используем логическую переменную типа "нужно или нет" менять стейт

@archibaldstriebendrossel 7 ай бұрын

У это проблемы две половины. Одна - непредсказуемый порядок получения ответов от сервера. В видео разбираются подходы для решения этой части. Вторая - непредсказуемый порядок получения запросов сервером. Клиент, отправляя сначала запрос А, а потом Б, не может быть уверен, что сервер получит их именно в этом порядке. Например, мы делаем редактор документов аля гугл док. Сохраняем текущую версию документа на сервер раз в секунду. Теперь, что будет если запрос отправленный последним, придёт на сервер предпоследним? На сервере окажется не та версия документа.

@MrManimarko 9 ай бұрын

ну явно лучше если аборт контроллер используется 1-2 раза, а не 100 потому что это копипаста говнокод, и race condition надо решать не на уровне компонента, а выше

@nilsen1879 9 ай бұрын

Спасибо за видео. Я как раз в предыдущих спрашивал про этот случай. Но мне почему-то кажется, что все является неким костылем и нужно добавлять дополнительный код чтобы логика работала так как надо. К тому же если я хочу просто свою асинхронную операцию как то отменить, а не сетевую, abort controller мне не подойдет. Во общем нужно создавать какой-то свой кастомный враппер, чтобы это хотя бы чистенько выглядело

@it-sin9k 9 ай бұрын

т.е. вы хотите отменить асинхронные функции? даже не связанные с запросом? а можно пример?

@arman-6172 7 ай бұрын

какие есть решения добавить таймауты для фетч? АбортКонтроллер ? это в офисе интернет хороший, а при использовании мобилок приложение может надолго зависнуть и только перезагрузка страницы решает проблему?

@it-sin9k 7 ай бұрын

я так понял, вы хотите поставить кастомное время на выполнения fetch? насколько я вижу примеры в гугле, в основном только через AbortController + setTimeout

@arman-6172 7 ай бұрын

@@it-sin9k верно. Интересно и серверное и клиент решение

@Niachan666 8 ай бұрын

Шёл 24 год, а всё базовые вещи разбирают

@it-sin9k 8 ай бұрын

а что хотелось бы обсудить в 24 году?)

@ГригорийШумихин 9 ай бұрын

Первый и самый очевидный в твоем примере функция дебонс. Как мне кажется) ну и честно к вопросу подходя Я не знаю какого качества надо писать код чтобы пришлось юзать аборт контроллеры и тд Проблема очевидна всегда. Либо бекенд и медленный серв. Фронт не должен закрывать костылями с абортами бекенд плохоработающий Второй криво написан сам фронт - проблема та же. Не надо делать костыли. Нужно делать простой и понятный код.

@ihateidiots9484 9 ай бұрын

Ошибаешься. Как раз фронтенд должен думать, что делать, если бек долго отвечает. Перекинуть ответственность тут не получится, типичный реактовец

@ГригорийШумихин 9 ай бұрын

@@ihateidiots9484 не должен если у бека руки из попы проблемы его Я могу это делать и заглушки в любом случае будут но это не фронта зона ответственности. Перевелу стрелки. Очередной говнокодер сеньор с 10 летним опытом? 🙂

@it-sin9k 9 ай бұрын

а как вы ожидаете должно работь приложение, если нужно отправить 2 подряд запроса с очень маленькой разницей?

@ГригорийШумихин 9 ай бұрын

@@it-sin9k можно пример, Саш (: Се то не пойму ) есть может редкий кейс где пригодится но он редкий)

@АлексейСоколов-у3к 9 ай бұрын

сеньор небось?)

@tagnati5585 9 ай бұрын

На моем проекте нашлось 4 места где создается инстанс аборт контроллера

@oughtlesss6553 9 ай бұрын

У нас на проекте есть удобная обёртка для запросов с аборт контроллером, которая используется почти везде. А ещё есть конструкция для проверки имеется ли файл на сервере (суть в том что существует только запрос, который скачивает файл, но нам не нужен сам файл, он очень большой, потому мы просто абортим запрос когда файл начинает скачиваться)

@it-sin9k 9 ай бұрын

а почему сервер не может просто сказать, есть файл или нет?)

@oughtlesss6553 9 ай бұрын

@@it-sin9kНет возможности что-то сделать с сервером), а у него настройка всегда на download или что-то тип того. На тот момент я ничего не нашел, чтобы не менять запрос на сервере

@shrekpar 9 ай бұрын

Вот и сюда пришла реклама занявшая 1/4 всего видео :(

@it-sin9k 9 ай бұрын

У нас не было рекламы примерно пол года) поэтому надеюсь терпимость и даже осмелюсь попросить поддержку перейти разок по ссылке)

@KGZVER 9 ай бұрын

@@it-sin9kдаже на комментарии с недовольством рекламы включили рекламу)

@it-sin9k 9 ай бұрын

надо же как то из лимонов делать лимонад))

@КирьянГорячев-е2э 9 ай бұрын

Люди хотят кушать и зарабатывать, сохраняя возможность транслировать бесплатный контент. Это не казино, ставки и уже спасибо, это вполне полезная реклама для аудитории. К тому же, видео размечено по тайм-кодам и можно легко пропустить, если это не интересно

@Icanfly- 9 ай бұрын

@@it-sin9k у меня хоть и стоит пропуск рекламы но сходил по ссылке, спасибо за труд

@mrstronciy1060 9 ай бұрын

Будет обзор React 19? Лень читать )

@it-sin9k 9 ай бұрын

Обязательно) обзор + поковыряем корнер кейсы)

@dimonsoftinfo 9 ай бұрын

Вариант с игнорированием череват исчерпанием ширины канала или превышением количества открытых сокетов (если используется HTTP/1). Обычно для решения подобных задач есть специализированные решения на подобии RxJS (особенно актуально для Angular). Там это можно сделать просто оператором switchMap. Жаль что React разработчики боятся использовать RxJS или ленятся использовать хотя бы AbortController.

@grenadier4702 9 ай бұрын

Использовать целую библиотеку для одной функции - такое себе. AbortController самое то

@dimonsoftinfo 9 ай бұрын

@@grenadier4702 разумеется если у вас маленькое приложение. Но в каком-нибудь здоровенном энтерпрайз приложении использование специализированного решения позволяет сократить время разработки и поднять качество кода. К тому же нет ничего плохого в том чтобы использовать аж целую библиотеку для одного случая. Все равно основная часть библиотеки будет отброшена. Также это исключает необходимость переписывания на специализированное решение впоследствии при разрастании приложения.

@grenadier4702 9 ай бұрын

@@dimonsoftinfo достаточно либо найти маленькую библиотеку под конкретное решение, либо самому один раз написать, протестировать и использовать во всех своих проектах

@archibaldstriebendrossel 9 ай бұрын

Вы несколько раз повторяете "специализированное решение" говоря про RxJS. Специализированное для чего?

@archibaldstriebendrossel 9 ай бұрын

RxJS - это про потоки событий. Их можно мапить, фильтровать, мёрджить и ещё стопицот "операторов". На фронте такая концепция как собаке пятая нога. Чаще всего проще (и лучше) написать тупой обработчик клика (одного), а не складывать клики в поток обвешанный "операторами". Штука крутая, никто не спорит, но либо в других задачах, либо как разминка для мозгов, либо, на худой конец, как повод выпендриться перед посонами в подвёрнутых штанишках. На фронте в продакшене от неё только повышенная сложность и около нуля пользы.

@ОлегСелин-ш9ы 9 ай бұрын

Ха! Целых 6 раз аборт контроллер вызывается! Из нескольких сотен запросов...

@it-sin9k 9 ай бұрын

это на 4 больше чем у нас))

@Kira_sk 9 ай бұрын

Дело в том что бек тоже должен обрабатывать аборт, у нас к примеру не умеет и смысла мне использовать нету

@it-sin9k 9 ай бұрын

хмм, а что сервер должен делать? вроде это же на клиенте просто рветься соединение.

@Kira_sk 9 ай бұрын

@@it-sin9k да но сервер его уже принял, отправил запрос в базу и тут я сказал ему что данные этого запроса меня уже не интересуют, со своей стороны понятно я сэкономлю трафик, а со стороны бека, разве не должно быть такой же аборт для остановки запроса в БД

@romandeveloper7720 9 ай бұрын

@@it-sin9k на клиенте. это чувак бредит чутка

@archibaldstriebendrossel 9 ай бұрын

@@it-sin9k PHP, например, по дефолту прибивает скрипт сразу же, как рвётся соединение. В общем случае, сервер может это обрабатывать (при желании) с помощью бэкэндного аналога AbortController.

@Kira_sk 9 ай бұрын

@@it-sin9k да, запрос на сервере вызовет запрос в бд, то что мы его остановим не обрывает запрос сервера. Ну вызвали, для update нет смысла абортить, а в случае использования кеширования то и на гет смысла нет