Технические заметки

В своё время для меня стал открытием тот факт, что метод fetch в JavaScript не кидает исключения на 400-х и 500-х ошибках, так как по сути, это всё валидные ответы сервера, и нам, разработчикам, решать, как эти ошибки обрабатывать.

В методе fetch() promise будет отклонён (reject) с TypeError, когда случится ошибка сети или не будет сконфигурирован CORS на стороне запрашиваемого сервера, хотя обычно это означает проблемы доступа или аналогичные — для примера, 404 не является сетевой ошибкой. Для достоверной проверки успешности fetch() будет включать проверку того, что promise успешен (resolved), затем проверку того, что значение свойства Response.ok является true.

Для моего неокрепшего ума начинающего веб-разработчика было малопостижимо, что ошибка 404 ошибкой самой по себе не является и это моя задача проверить статус запроса и соответствующе отреагировать. Лично по моему скромному мнению, обработка ошибок - одна из самых нудных задач в разработке, потому самому обрабатывать такую банальщину, как 400-е ответы, кажется уж совсем не современно.

Да, конечно, вы можете справедливо мне посоветовать Axios, TanStack или RTK Query и будете правы, но когда сам по себе проект является очень маленьким, почти домашним, тащить туда целую библиотеку для запросов кажется избыточным, потому было грустно осознавать, что придется все оборачивать в try\catch.

Однако, поковырявшись в интернетах я набрел на вот такую либу: ky.
По сути, это обёртка над fetch, но с упрощенным синтаксисом и очень широким списком фичей, в виде автоматических повторов запросов, автоматического парсинга JSON, понятных исключений при 400-х и 500-х ошибках и много еще чего другого.

Одна из примечательных возможностей библиотеки, после понятных сообщений при http-ошибках, это модификация тела запроса в определенных условиях. Например, я использовал ky, чтобы обновлять токен, когда он истекает, что делает создание цикла авторизации очень удобным.

Происходит запрос => Токен истек => Запрос рефреш-токена => повторный запрос.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

Я наткнулся на этот инструмент, когда изучал JWT-токены. Пытаясь реализовать сценарий работы с ними, мне не понравился подход с Interceptors в Axios. Очень уж громоздко.

#javascript #React #dx

❤‍🔥1❤1🔥1

39 viewsedited 13:59