Сетевые запросы on JSFlow

Fetch API

Mon, 01 Jan 0001 00:00:00 +0000

Fetch API #

Fetch — современный способ отправить HTTP-запрос из браузера и получить Response. Метод возвращает Promise, поэтому его удобно сочетать с async/await.

Простой GET-запрос #

const response = await fetch('/api/tracks?limit=5')
const tracks = await response.json()
console.log(tracks.length)

По умолчанию fetch делает GET без тела. URL может быть относительным (/api/...) — браузер подставит origin текущей страницы.

Если сервер отвечает не JSON, а текстом или файлом:

const response = await fetch('/api/export.csv')
const csv = await response.text()

Разбор JSON #

response.json() тоже возвращает Promise: тело читается асинхронно.

CORS и ошибки запросов

Mon, 01 Jan 0001 00:00:00 +0000

CORS и ошибки запросов #

CORS (Cross-Origin Resource Sharing) — механизм браузера, который ограничивает чтение ответов на запросы к другому origin (другой домен, порт или протокол). JavaScript на https://shop.example не может свободно читать ответ от https://api.other.com, пока сервер явно не разрешит это заголовками.

Origin и «тот же сайт» #

Origin = протокол + хост + порт:

URL страницы	URL API	Кросс-домен?
`https://jsflow.dev/app`	`https://jsflow.dev/api`	Нет
`https://jsflow.dev/app`	`http://jsflow.dev/api`	Да (протокол)
`https://jsflow.dev/app`	`https://api.jsflow.dev`	Да (хост)

// same-origin — CORS не мешает читать ответ
const home = await fetch('/api/config')
const config = await home.json()

Запрос уходит на другой origin, но если сервер не прислал разрешающие заголовки, скрипт не увидит тело ответа — в консоли типичная ошибка про CORS policy.

WebSocket

Mon, 01 Jan 0001 00:00:00 +0000

WebSocket #

WebSocket — протокол поверх TCP, который держит постоянное двустороннее соединение между браузером и сервером. В отличие от Fetch, сервер может сам отправить данные клиенту без нового HTTP-запроса — удобно для чатов, живых дашбордов и уведомлений о статусе заказа.

Создание соединения #

Клиентский API — глобальный конструктор WebSocket. URL начинается с ws:// или wss:// (защищённый вариант, аналог HTTPS):

const socket = new WebSocket('wss://jsflow.dev/ws/playlist')

socket.addEventListener('open', () => {
 console.log('Канал открыт')
})

socket.addEventListener('message', (event) => {
 const payload = JSON.parse(event.data)
 console.log('Новый трек:', payload.title)
})

После успешного handshake соединение остаётся открытым, пока одна из сторон не закроет его или не оборвётся сеть.

Server-Sent Events (EventSource)

Mon, 01 Jan 0001 00:00:00 +0000

Server-Sent Events (EventSource) #

Server-Sent Events (SSE) — способ получать от сервера поток текстовых событий по одному HTTP-соединению. Клиентский API — класс EventSource: браузер сам переподключается и парсит формат text/event-stream. Подходит для ленты активности, счётчиков на дашборде и статусов сборки — когда клиенту нужно только слушать, без частых ответов серверу.

Базовое подключение #

const feed = new EventSource('/api/dashboard/activity')

feed.onmessage = (event) => {
 const row = JSON.parse(event.data)
 appendActivityRow(row.user, row.action)
}

feed.onerror = () => {
 console.warn('Поток активности прерван, EventSource переподключится')
}

Первый аргумент — URL (обычно same-origin). В отличие от fetch, соединение остаётся открытым: сервер периодически дописывает строки в тело ответа.