JS

API отвечает в терминале, а браузер показывает ошибку CORS. Проверьте адрес страницы и адрес запроса: разница в порте уже создаёт границу доступа. Воспроизведём сбой локально, разрешим конкретный origin и проверим предварительный запрос.

Соберём два учебных сервера без сторонних пакетов: страницу на http://127.0.0.1:5173 и API на http://127.0.0.1:3000. После упражнения вы сможете объяснить, на каком шаге браузер остановил запрос, и выбрать настройку API либо прокси для разработки.

Базовые методы и JSON разобраны в статье о работе с API. Здесь сосредоточимся на адресах и заголовках. Для диагностики рекомендуем сначала воспроизвести отказ с прямым запросом к API: прокси способен скрыть ошибку конфигурации, которая снова проявится при публикации.

Сервер вернул 404, а catch не сработал. Такое поведение у Fetch ожидаемо. Соберём каталог, который различает ответ с ошибкой, недоступную сеть и неверный JSON, показывает загрузку и позволяет повторить запрос с клавиатуры.

В результате на странице будут четыре понятных состояния: ожидание, список товаров, пустой каталог и ошибка. Проверять их будем на собственном учебном сервере. Данные вымышленные; ни ключей API, ни регистрации не понадобится.

Если вы ещё не отправляли запросы, начните с базового разбора Fetch. Здесь займёмся тем, что происходит вокруг запроса в интерфейсе. Для повторной загрузки рекомендуем явную кнопку: бесконечный автоматический повтор мешает увидеть причину сбоя и продолжает обращаться к серверу.

Объект Date в JavaScript считается одной из худших частей языка: месяцы нумеруются с нуля, парсинг строк непредсказуем, объект мутабельный, а работа с таймзонами — отдельная боль. Поэтому многие проекты тянут библиотеки вроде date-fns или Luxon. Temporal — это новый встроенный API дат, который проектировали с нуля, учтя все ошибки Date.

Обычный fetch работает так: браузер ждёт, пока сервер отправит весь ответ, и только потом отдаёт данные вашему коду. Для небольших JSON-ов это нормально. Но если ответ большой, или сервер генерирует его постепенно (как это делают языковые модели при стриминге), ждать полного ответа — плохая идея. Streams API позволяет читать ответ прямо по мере поступления.

В ReadableStream каждый ответ fetch имеет свойство body — это ReadableStream. Из него можно читать данные кусками (chunks) по мере их поступления:

const response = await fetch('/api/stream');
const reader = response.body.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  console.log(decoder.decode(value));
}

Метод reader.read() возвращает промис с объектом { done, value }. value — это Uint8Array (сырые байты), поэтому нужен TextDecoder для перевода в строку. Когда данные кончаются, done становится true.

Когда вы запрашиваете данные через curl или читаете конфигурационный файл, JSON в терминале выглядит примерно так: одна длинная строка без переносов и отступов, которую невозможно читать. А если ответ весит несколько килобайт с вложенными объектами — найти нужное поле глазами нереально.

jq — инструмент командной строки для работы с JSON: форматирует, фильтрует, извлекает нужные поля и преобразует данные. Работает как конвейер: передаёте JSON на вход, получаете нужный кусок на выходе.

Копирование объектов в JavaScript — одна из тех тем, которые поначалу кажутся простыми, а потом преподносят неожиданные сюрпризы.

Присвоить объект через = — не копирование. Это просто ещё одна ссылка на тот же объект. Измените копию — изменится оригинал:

const original = { name: 'Иван', scores: [10, 20, 30] };
const copy = original;

copy.name = 'Пётр';
console.log(original.name); // 'Пётр' — изменился оригинал!

Для поверхностного копирования используют Object.assign() или spread-оператор {...obj}. Но они копируют только первый уровень. Вложенные объекты и массивы по-прежнему остаются общими.

В 2022 году JavaScript получил structuredClone() — стандартный способ сделать полную глубокую копию.

Опечатка в имени переменной, использование == вместо ===, вызов функции до её объявления — всё это браузер обнаружит только в момент выполнения кода. В лучшем случае вы увидите ошибку сразу, в худшем — она всплывёт у пользователя в продакшене.

ESLint проверяет код до запуска. Он читает файл, анализирует структуру и сообщает о проблемах прямо в редакторе или в терминале. Это называется статическим анализом, или линтингом.

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

Можно писать arr[arr.length - 1] — работает, но громоздко. Можно использовать arr.slice(-1)[0] — ещё хуже. Оба варианта требуют знать длину массива или создавать промежуточный массив ради одного элемента.

В 2022 году в JavaScript появился метод .at(), который решает это элегантно.

Вышел Vite 8 — самое крупное изменение архитектуры с версии 2. Главное: под капотом теперь работает единственный бандлер Rolldown, написанный на Rust. Раньше их было два — esbuild для разработки и Rollup для финальной сборки. Теперь один инструмент делает всё.

После продолжительного изучения темы выяснилось, что Popover API и Dialog API кардинально отличаются с точки зрения доступности. Если вы стоите перед выбором, придерживайтесь такого правила:

• Используйте Popover API для большинства поповеров.
• Используйте Dialog API только для модальных диалогов.