Метод $.fetch()

Метод $.fetch() является высокоуровневым инструментом для выполнения HTTP-запросов в браузере с использованием синтаксиса, упрощающего работу с промисами и обработку данных. Bliss.js предоставляет обёртку над стандартным fetch API, добавляя удобные цепочки вызовов, автоматическую обработку JSON и текстовых ответов, а также встроенную поддержку ошибок.

Основной синтаксис

$.fetch(url, options)
  .then(response => { /* обработка ответа */ })
  .catch(error => { /* обработка ошибок */ });

Параметры метода:

  • url — строка с адресом запроса.

  • options — объект настроек запроса, аналогичный параметру init стандартного fetch. Может содержать:

    • method — HTTP-метод (GET, POST, PUT, DELETE и т. д.).
    • headers — объект заголовков запроса.
    • body — тело запроса для методов POST и PUT.
    • credentials — политика отправки cookies ("same-origin", "include").

Метод возвращает Promise, который разрешается объектом ответа, дополнительно расширенным методами для удобной работы с данными.

Обработка ответа

Объект ответа, возвращаемый $.fetch(), имеет следующие методы:

  • res.text() — возвращает тело ответа как строку.
  • res.json() — парсит JSON и возвращает объект JavaScript.
  • res.blob() — возвращает бинарные данные.
  • res.ok — логическое значение, отражающее успешность запроса (код ответа 200–299).

Пример использования:

$.fetch('/api/users')
  .then(res => {
    if (!res.ok) throw new Error(`Ошибка запроса: ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

Автоматическая обработка JSON

Bliss.js позволяет сразу работать с JSON-ответами без необходимости явного вызова res.json() через цепочку then. Для этого достаточно указать опцию json: true:

$.fetch('/api/data', { json: true })
  .then(data => console.log(data))
  .catch(err => console.error(err));

В этом случае метод автоматически проверяет заголовки ответа и преобразует данные в объект JavaScript, упрощая работу с API.

Отправка данных на сервер

Метод $.fetch() поддерживает отправку данных в формате JSON или URL-encoded. Пример POST-запроса с JSON:

$.fetch('/api/save', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 25 })
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Для отправки формы в формате application/x-www-form-urlencoded:

$.fetch('/api/form', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ name: 'Alice', age: 25 })
});

Работа с заголовками

Bliss.js позволяет легко устанавливать и изменять заголовки запроса через объект headers в опциях:

$.fetch('/api/resource', {
  headers: {
    'Authorization': 'Bearer token123',
    'Accept': 'application/json'
  }
});

Заголовки могут быть динамически сгенерированы:

const token = 'token123';
$.fetch('/api/secure', { headers: { 'Authorization': `Bearer ${token}` } });

Обработка ошибок и статусов

Метод $.fetch() автоматически выбрасывает исключение только при сетевых ошибках. Ошибки HTTP (например, 404 или 500) требуют проверки свойства res.ok:

$.fetch('/api/items')
  .then(res => {
    if (!res.ok) throw new Error(`Статус ошибки: ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Ошибка запроса:', err.message));

Для упрощения обработки Bliss.js позволяет использовать вспомогательную цепочку catch сразу после then, сохраняя контекст запроса.

Поддержка асинхронного/await синтаксиса

Метод полностью совместим с async/await, что делает код более читаемым:

async function getUsers() {
  try {
    const res = await $.fetch('/api/users', { json: true });
    console.log(res);
  } catch (err) {
    console.error(err);
  }
}

getUsers();

Настройка глобальных параметров

Bliss.js позволяет задавать глобальные настройки для всех вызовов $.fetch(), например, базовый URL или общие заголовки:

$.fetch.defaults.baseURL = 'https://api.example.com';
$.fetch.defaults.headers = { 'Authorization': 'Bearer token123' };

$.fetch('/profile', { json: true }).then(console.log);

Эта возможность упрощает интеграцию с API и избавляет от необходимости повторно указывать одинаковые опции для каждого запроса.

Интеграция с другими методами Bliss.js

Метод $.fetch() хорошо сочетается с другими функциями библиотеки, например, с $.ready() для выполнения запроса после загрузки DOM:

$.ready(() => {
  $.fetch('/api/posts', { json: true })
    .then(posts => console.log(posts));
});

Также возможна цепочка с методами для манипуляции DOM после получения данных:

$.fetch('/api/messages', { json: true })
  .then(messages => $.id('messages').html(messages.map(m => `<li>${m.text}</li>`).join('')));

Метод $.fetch() в Bliss.js объединяет гибкость стандартного fetch и удобство высокоуровневой работы с промисами и данными, облегчая взаимодействие с API, управление заголовками и обработку ошибок без лишнего кода.

Оглавление