Знали, что fetch-запрос можно отменить прямо из JS?

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

AbortController создаёт сигнал, который можно “прикрепить” к fetch:

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });

Если запрос больше не нужен, просто “абортим”:

controller.abort();

При отмене fetch выбрасывает AbortError — это нормально, можно отловить и проигнорировать:

fetch(url, { signal: controller.signal })
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

🔥 Деталь, которая делает код предсказуемым даже под нагрузкой.

📣 JS Ready | #совет

4 способа скопировать массив без мутаций!

Чтобы избежать случайных изменений исходных данных, важно уметь создавать независимую копию массива.

1. Spread-оператор (поверхностная копия — вложенные объекты остаются по ссылке)

const arr = [1, 2, 3];
const copy = [...arr];

2. Метод slice() (поведение как у spread — неглубокое копирование)

const arr = [1, 2, 3];
const copy = arr.slice();

3. Метод Array.from()

const arr = [1, 2, 3];
const copy = Array.from(arr);

Поддерживает преобразование элементов:

const doubled = Array.from(arr, x => x * 2); // [2, 4, 6]

4. Глубокая копия через JSON (если есть вложенные данные), но теряет функции, undefined и даты

const arr = [{ id: 1 }, { id: 2 }];
const deepCopy = JSON.parse(JSON.stringify(arr));

🔥 Эти приёмы помогают писать стабильный и предсказуемый код, особенно при работе со сложными структурами.

📣 JS Ready | #практика

👩‍💻 Работаете с HTML и хочется видеть результат сразу — без браузера и без Live Server?

Inline Preview решает это за секунду. Выделяешь нужный кусок разметки и vsсode мгновенно показывает рендер прямо в редакторе. Особенно удобно при работе с email-шаблонами, SSR-разметкой или отдельными UI-компонентами, когда нужно быстро проверить кусок, а не весь проект.

📣 JS Ready | #vscode