Как получить код статуса из HTTP-ошибки в Axios?

То, что вы видите, — это строка, возвращаемая методом toString объекта error. Объект error не является строкой.

Если сервер отправил ответ, объект error будет содержать свойство response:

axios.get('/foo')
  .catch(function (error) {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });

В данном примере, если возникает ошибка при выполнении запроса, можно получить доступ к данным ответа с помощью error.response.data, статусу с помощью error.response.status и заголовкам с помощью error.response.headers. Это поможет вам лучше понять, что именно произошло на стороне сервера.

С TypeScript легко найти то, что вам нужно, используя правильные типы.

Это значительно упрощает работу, так как вы можете получить все свойства типа с помощью автозаполнения, что позволяет вам знать правильную структуру вашего ответа и возможной ошибки.

Например, вы можете использовать библиотеку Axios для выполнения запросов:

import { AxiosResponse, AxiosError } from 'axios';

axios.get('foo.example')
  .then((response: AxiosResponse) => {
    // Обработка ответа
  })
  .catch((reason: AxiosError) => {
    if (reason.response!.status === 400) {
      // Обработка ошибки 400
    } else {
      // Обработка других ошибок
    }
    console.log(reason.message);
  });

Кроме того, вы можете передать параметр обоим типам, чтобы указать, что вы ожидаете получить внутри response.data, например так:

import { AxiosResponse, AxiosError } from 'axios';

axios.get('foo.example')
  .then((response: AxiosResponse<{ user: { name: string } }>) => {
    // Обработка ответа
  })
  .catch((reason: AxiosError<{ additionalInfo: string }>) => {
    if (reason.response!.status === 400) {
      // Обработка ошибки 400
    } else {
      // Обработка других ошибок
    }
    console.log(reason.message);
  });

Таким образом, использование TypeScript в сочетании с Axios помогает вам чётко определить типы данных, которые вы ожидаете получить, сокращая количество ошибок и улучшая читаемость кода.

В конфигурации запроса появилась новая опция под названием validateStatus. С помощью этой опции вы можете задать условие для предотвращения выбрасывания исключений, если статус меньше 100 или больше 300 (что является стандартным поведением). Пример использования:

const {status} = axios.get('foo.example', {validateStatus: () => true})

В данном примере validateStatus: () => true позволяет считать любые статусы успешными, что может быть полезно в тех случаях, когда вам не нужны ошибки для определённых статус-кодов.

Вы можете использовать оператор расширения (...), чтобы преобразовать объект ошибки в новый объект, как показано ниже:

axios.get('foo.example')
    .then((response) => {})
    .catch((error) => {
        console.log({...error});
    });

Имейте в виду, что в этом случае это не будет экземпляр Error.

Вы можете использовать интерсепторы Axios для обработки ответов как успешных, так и ошибочных. В вашем примере кодовая база настроена на перехват ошибок следующим образом:

const HttpClient = axios.create({
  baseURL: env.baseUrl,
});

HttpClient.interceptors.response.use((response) => {
  return response;
}, (error) => {
  return Promise.resolve({ error });
});

В этом коде создается экземпляр HttpClient с базовым URL. Интерсептор для ответа получает как успешные, так и ошибочные ответы. Если ответ успешный, он просто возвращается. В случае ошибки, ошибка оборачивается в промис и возвращается в виде объекта { error }.

Это позволяет вам обрабатывать ошибки более удобно в ваших запросах, например:

HttpClient.get('/some-endpoint')
  .then(result => {
    if (result.error) {
      console.error('Произошла ошибка:', result.error);
    } else {
      console.log('Успешный ответ:', result);
    }
  });

Таким образом, вы можете обрабатывать ошибки и успешные ответы в одном месте, что упрощает работу с кодом.