JavaScript: основы для бэкенда

JavaScript — язык браузера, который управляет интерактивностью страницы. Бэкенд-разработчику нужно понимать, как JS взаимодействует с сервером через fetch/AJAX и как работает асинхронность.

Почему это важно: Даже если вы пишете бэкенд на Python или Ruby, фронтенд вашего приложения использует JavaScript для отправки запросов, обработки ответов и обновления интерфейса. Понимание этого процесса критично для отладки и проектирования API.

Главная идея

JavaScript работает в однопоточном event loop. Сетевые запросы выполняются асинхронно через промисы, а DOM API позволяет менять страницу без перезагрузки.

Как это выглядит на практике

Пользователь нажимает кнопку «Добавить в корзину»
JavaScript перехватывает событие click через addEventListener
JS отправляет асинхронный POST-запрос на /api/cart через fetch
Браузер не блокируется — пользователь может продолжать взаимодействие
Сервер обрабатывает запрос и возвращает JSON-ответ
JS получает ответ и обновляет счётчик корзины в DOM без перезагрузки

Примеры кода

fetch — отправка запросов на сервер

// GET-запрос
const response = await fetch('/api/products');
const products = await response.json();
console.log(products); // [{ id: 1, name: 'Товар' }, ...]

// POST-запрос с телом
const res = await fetch('/api/cart', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content
  },
  body: JSON.stringify({ product_id: 42, quantity: 1 })
});

if (res.ok) {
  const data = await res.json();
  document.getElementById('cart-count').textContent = data.total_items;
} else {
  console.error('Ошибка:', res.status);
}

Event loop и асинхронность

console.log('1 — синхронно');

setTimeout(() => {
  console.log('3 — из очереди макрозадач');
}, 0);

Promise.resolve().then(() => {
  console.log('2 — из очереди микрозадач');
});

// Вывод: 1, 2, 3
// Промисы (микрозадачи) выполняются раньше setTimeout (макрозадачи)

Что происходит под капотом

Event loop: JS выполняет код из call stack, затем проверяет очереди микро- и макрозадач
fetch возвращает промис — объект, представляющий результат асинхронной операции
async/await — синтаксический сахар над промисами, код выглядит синхронным, но не блокирует поток
CORS: браузер блокирует запросы на другой домен, если сервер не вернул заголовок Access-Control-Allow-Origin
JSON.parse/JSON.stringify — сериализация данных для обмена между фронтом и бэком

Типичные ошибки и заблуждения

«setTimeout(fn, 0) выполнится мгновенно» — нет, он попадёт в очередь и выполнится после текущего кода и микрозадач
«fetch автоматически кидает ошибку при 404/500» — нет, промис resolve'ится даже при HTTP-ошибках, нужно проверять response.ok
«CORS — проблема фронтенда» — на самом деле это должен настраивать бэкенд, добавляя нужные заголовки

Ключевые выводы

fetch — основной способ общения фронтенда с бэкендом, возвращает промис
async/await делает асинхронный код читаемым, но не блокирует поток
CORS настраивается на сервере — бэкендер должен знать, какие заголовки добавить

Термины урока

{:term=>"Event loop", :definition=>"Механизм выполнения JS: обрабатывает call stack, затем микрозадачи (промисы), затем макрозадачи (setTimeout)"}

{:term=>"Promise", :definition=>"Объект, представляющий результат асинхронной операции — может быть pending, fulfilled или rejected"}

{:term=>"CORS", :definition=>"Cross-Origin Resource Sharing — механизм, позволяющий серверу указать, с каких доменов разрешены запросы"}

Связь с работой backend-разработчика

Понимание fetch и промисов помогает проектировать API, которые удобно вызывать из фронтенда. Знание CORS избавляет от часов отладки. А понимание event loop объясняет, почему фронтенд «зависает» при тяжёлых синхронных операциях.

Мини-разбор реальной ситуации

Команда потратила полдня на дебаг: fetch-запрос с фронтенда на /api/orders возвращал ошибку CORS. Оказалось, бэкенд не возвращал заголовок Access-Control-Allow-Origin для нового поддомена staging.app.com. Одна строчка в конфигурации CORS на сервере решила проблему.

Что запомнить

fetch — POST/GET запросы к серверу, всегда проверяйте response.ok
async/await — читаемый способ работы с промисами
CORS — ответственность бэкенда, настройте заголовки для разрешённых доменов

Итог

JavaScript — клей между пользовательским интерфейсом и вашим API. Понимание fetch, промисов, event loop и CORS — необходимый минимум для бэкенд-разработчика, чтобы эффективно взаимодействовать с фронтенд-частью приложения.