Fetch API: Обработка ошибок

Учитывая приведенный ниже код, в котором запрос с использованием Fetch API возвращает ошибку 404, каким будет сообщение в консоли: успешное или неудачное?

try {
  // this endpoint will return 404
  const response = await fetch('https://restcountries.com/v4.1/all');
  console.log('Success');
} catch {
  console.error('Failed');
}

Если вы предполагаете, что этот код регистрирует сообщение о сбое при возникновении ошибки 404, то эта статья определенно для вас, потому что ваш ответ неверен. Появится console.log сообщение об успешном выполнении, и мы расскажем вам, почему и как лучше всего обрабатывать ошибки с помощью Fetch API.

Что такое Fetch API?

Короче говоря, Fetch API — это интерфейс для простого выполнения асинхронных HTTP-запросов GET и POST к API.

Как обрабатывать ошибки с помощью Fetch API?

При использовании Fetch API могут возникать различные ошибки, такие как: ошибка сервера (500), ошибка «не найдено» (404), ошибка сети, ошибка CORS и т. д. И у нас есть разные подходы к обработке всех этих ошибок, как вы можете видеть ниже.

Использование try/catch для обработки ошибок Fetch API

Я предполагаю, что вы знакомы с промисами в JavaScript и знаете, как они работают (потому что одна из причин популярности Fetch API заключается в том, что он возвращает промис).

Следовательно, мы можем использовать силу then, catch и finally когда выборка будет разрешена, она будет отклонена и завершена.

Заключение вызова выборки в блок try/catch — очень распространенный способ обработки ошибок (см. пример ниже), но не все ошибки можно перехватить, и мы объясним это сразу после кода.

try {
  // this endpoint will return CORS error
  const response = await fetch('https://google.com/api');
} catch {
  console.error('Failed');
}
// Output: Failed

Этот код попытается выполнить выборку и обнаружить ошибки только в том случае, если promise отклонено (что может произойти в двух сценариях) :

• сетевые ошибки : невозможность подключения к серверу, которая может быть вызвана несколькими причинами, например, медленной сетью и тайм-аутом.
• Ошибки CORS : когда домену не разрешено получать ресурсы из другого домена.

Fetch вернет разрешение для ошибок статуса сервера (например, 404 и 500), поэтому catch не может их получить в примере в начале этой статьи.

Проверка статуса ответа для обработки ошибок Fetch API

Другой распространенный способ обработки ошибок с помощью Fetch API — проверка статуса ответа при разрешении промиса — и именно так мы должны получить ошибку 404 в примере в начале этой статьи:

// this endpoint will return 404
const response = await fetch('https://restcountries.com/v4.1/all');

if (response.ok) {
  // ...do something with the response if response.ok is true
} else {
  console.error('Failed');
}

Здесь мы используем response.ok, чтобы проверить, был ли ответ успешным или нет (истина или ложь).

• это true когда код состояния находится между 200 и 299 (это означает успех).
• это false когда сервер возвращает любой другой статус, кроме указанного выше. Примеры: 404 (не найден) и 500 (внутренняя ошибка сервера).

Лучший способ обработки ошибок с помощью Fetch API

Пример 1

Как вы видели выше, методы try/catch и response.ok используются для перехвата различных типов ошибок, поэтому мы можем объединить два подхода для лучшей обработки ошибок с помощью Fetch API. См. пример ниже:

try {
  const response = await fetch('https://restcountries.com/v4.1/all');
  if (response.ok) {
    console.log('Promise resolved and HTTP status is successful');
    // ...do something with the response
  } else {
    console.error('Promise resolved but HTTP status failed');
  }
} catch {
  console.error('Promise rejected');
}

Объяснение:

• try/catch используется для получения ошибок, когда обещание отклонено (проблемы с сетью или CORS)
• response.ok используется для обработки ошибок сервера (например, 404 или 500), когда обещание решено

Пример 2

Другой распространенный способ обработки ошибок внутри tryблока — выдача ошибки, когда response.ok это не так true, чтобы catch блок выполнился, чтобы мы могли обрабатывать все ошибки в одном и том же месте. См. пример ниже для лучшего понимания:

try {
  const response = await fetch('https://restcountries.com/v4.1/all');

  if (response.ok) {
    console.log('Promise resolved and HTTP status is successful');
    // ...do something with the response
  } else {
    // Custom message for failed HTTP codes
    if (response.status === 404) throw new Error('404, Not found');
    if (response.status === 500) throw new Error('500, internal server error');
    // For any other server error
    if (!response.ok) throw new Error(response.status);
  }
} catch (error) {
  console.error('Fetch', error);
  // Output e.g.: "Fetch Error: 404, Not found"
}

Здесь мы выбрасываем ошибки для их обработки в блоке catch, а также отображаем специальное сообщение в консоли в зависимости от типа ошибки.

• когда response.ok возвращается false, мы можем просто выдать ошибку, поэтому блок catch будет выполнен
• catch будет обрабатывать все типы ошибок
• catch принимает аргумент, который можно настроить при выдаче ошибок из блока try.
• response.status может использоваться для проверки возвращенного кода состояния HTTP для отображения настроенных сообщений в консоли (например, 400, 404, 500…).

Заключение

Очень важно обрабатывать все ошибки, которые могут возникнуть при использовании Fetch API при получении ресурсов с сервера, и здесь мы объяснили, как использовать try/catch вместе с response.ok и response.status получать различные ошибки, а также настраивать способ их обработки.