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

Bliss.js предоставляет удобный и современный подход к работе с HTTP-запросами и асинхронными операциями в браузере. Обработка ответов является ключевой частью взаимодействия с сервером, так как именно от неё зависит корректное получение и интерпретация данных.

Получение ответа

Метод Bliss.fetch используется для отправки запросов и получения ответа. Его вызов возвращает объект Promise, который разрешается с объектом Response. Основные свойства объекта Response:

  • status — числовой код HTTP-статуса (например, 200, 404).
  • ok — булево значение, true если статус в диапазоне 200–299.
  • headers — объект заголовков ответа.
  • Методы для извлечения тела: text(), json(), blob(), arrayBuffer(), formData().

Пример базового запроса и получения JSON-ответа:

Bliss.fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
    return response.json();
  })
  .then(data => {
    console.log('Данные получены:', data);
  })
  .catch(error => {
    console.error('Ошибка запроса:', error);
  });

Асинхронная обработка через async/await

Для удобства обработки ответов можно использовать синтаксис async/await. Это упрощает чтение и структуру кода:

async function loadData() {
  try {
    const response = await Bliss.fetch('/api/data');
    if (!response.ok) throw new Error(`Ошибка: ${response.status}`);
    const data = await response.json();
    console.log('Данные получены:', data);
  } catch (error) {
    console.error('Ошибка запроса:', error);
  }
}

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

Объект headers позволяет получать и устанавливать значения заголовков. В Bliss.js доступны методы get, has, forEach, аналогичные стандартному API Headers:

Bliss.fetch('/api/data')
  .then(response => {
    console.log('Content-Type:', response.headers.get('Content-Type'));
  });

При отправке запроса заголовки можно передавать через опцию headers:

Bliss.fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer TOKEN'
  },
  body: JSON.stringify({ key: 'value' })
});

Обработка различных форматов ответа

Bliss.js поддерживает несколько форматов данных:

  • JSON — наиболее часто используемый формат для обмена данными.
  • Text — простой текстовый ответ.
  • Blob — для работы с бинарными данными, например, изображениями или файлами.
  • ArrayBuffer — низкоуровневый доступ к бинарным данным.
  • FormData — удобный для отправки форм и обработки multipart-запросов.

Пример обработки изображения:

const response = await Bliss.fetch('/images/photo.png');
if (response.ok) {
  const blob = await response.blob();
  const imgURL = URL.createObjectURL(blob);
  document.querySelector('#photo').src = imgURL;
}

Ошибки и тайм-ауты

Bliss.js предоставляет встроенные механизмы для обработки ошибок сетевого уровня и тайм-аутов. Если сервер недоступен или происходит ошибка сети, Promise будет отклонен. Тайм-аут задается через параметр timeout:

Bliss.fetch('/api/data', { timeout: 5000 })
  .then(response => response.json())
  .catch(error => console.error('Сетевой сбой или тайм-аут:', error));

Цепочки обработки

Для сложных сценариев часто используются цепочки then, позволяющие выполнять несколько последовательных операций с ответом. Например, проверка статуса, парсинг JSON и фильтрация данных:

Bliss.fetch('/api/data')
  .then(res => res.ok ? res.json() : Promise.reject(res.status))
  .then(data => data.filter(item => item.active))
  .then(filtered => console.log('Активные элементы:', filtered))
  .catch(error => console.error('Ошибка обработки:', error));

Кастомизация обработки

Bliss.js позволяет создавать собственные функции-парсеры, если стандартные методы (json, text) не подходят. Это делается через передачу коллбэка в цепочке then:

Bliss.fetch('/api/custom')
  .then(response => response.text())
  .then(rawData => {
    // кастомный парсер
    const parsed = rawData.split('\n').map(line => line.split(','));
    console.log(parsed);
  });

Отмена запросов

Bliss.js поддерживает механизм отмены запросов через AbortController. Это полезно для прерывания долгих операций:

const controller = new AbortController();

Bliss.fetch('/api/data', { signal: controller.signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') console.log('Запрос отменен');
  });

// Отмена запроса через 2 секунды
setTimeout(() => controller.abort(), 2000);

Практические рекомендации

  • Всегда проверять response.ok перед обработкой тела ответа.
  • Для больших файлов использовать blob или arrayBuffer вместо json или text.
  • Обрабатывать ошибки через catch, чтобы предотвратить необработанные исключения.
  • Использовать AbortController для отмены устаревших или долгих запросов.
  • Разделять логику проверки статуса и парсинга данных для улучшения читаемости кода.

Обширный функционал Bliss.js позволяет гибко и эффективно обрабатывать ответы сервера, обеспечивая надёжное взаимодействие с любыми веб-API и удобную работу с различными типами данных.

Оглавление