Есть ли универсальная функция обработки ошибок в Fetch?

В языке JavaScript для выполнения сетевых запросов используется API Fetch, предоставляющий простой и мощный способ взаимодействия с сервером. Одним из аспектов, который необходимо учитывать при использовании Fetch, является обработка ошибок, которые могут возникнуть во время выполнения запросов.

Если рассматривать встроенные возможности Fetch, то они, к сожалению, не предоставляют "универсальной" функции для обработки ошибок. Ошибки могут возникать как на стороне сети (например, если сервер недоступен), так и на стороне JavaScript (например, если запрос выполнился с ошибкой). По умолчанию Fetch возвращает промис, который разрешается только в случае успешного выполнения запроса, и отклоняется в случае возникновения ошибки.

Однако, разработчикам есть несколько способов обработки ошибок в запросах с использованием Fetch.

1. Использование метода .catch():
В данном подходе можно использовать метод .catch() после выполнения запроса для отлова ошибок. Например:

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error(response.status);
    }
    return response.json();
  })
  .then(data => {
    // Обработка успешного ответа
  })
  .catch(error => {
    // Обработка ошибки
  });

В этом примере, если запрос выполнен успешно, промис разрешится, и будет выполнена следующая функция в цепочке .then(). Если же запрос вернул ошибку, будет брошено исключение, и выполнение промиса будет передано функции .catch().

2. Проверка свойства ok:
Fetch API предоставляет свойство .ok у объекта Response, которое возвращает true, если статус ответа находится в диапазоне 200-299 (то есть запрос выполнен успешно), и false в противном случае. Это свойство можно использовать для проверки успешности запроса:

fetch(url)
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(response.status);
    }
  })
  .then(data => {
    // Обработка успешного ответа
  })
  .catch(error => {
    // Обработка ошибки
  });

Здесь мы сначала проверяем свойство .ok у объекта Response. Если оно равно true, значит запрос выполнен успешно и мы можем обработать полученные данные. В противном случае, бросаем исключение и переходим к функции .catch().

3. Создание собственной функции для обработки ошибок:
В случае, когда нужно настроить более сложную логику обработки ошибок, можно создать собственную функцию. Например:

function handleErrors(response) {
  if (!response.ok) {
    throw new Error(response.status);
  }
  return response.json();
}

fetch(url)
  .then(handleErrors)
  .then(data => {
    // Обработка успешного ответа
  })
  .catch(error => {
    // Обработка ошибки
  });

В этом примере мы создаем функцию handleErrors(), которая проверяет свойство .ok у объекта Response и возвращает либо промис с данными, либо бросает исключение.

Это лишь несколько примеров подходов к обработке ошибок при использовании Fetch в JavaScript. В конечном итоге, выбор конкретного подхода зависит от требований вашего проекта и логики обработки ошибок, которую вы хотите применить.