Как правильно обработать ошибку axios?

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

Начнем с рассмотрения некоторых общих подходов к обработке ошибок в JavaScript. Для обработки ошибок вы можете использовать конструкцию try-catch. Коли при выполнении кода внутри блока try возникает ошибка, выполнение переходит в блок catch, где может быть указано, как обрабатывать эту ошибку.

В axios мы можем использовать эту конструкцию для обработки ошибок, которые могут возникнуть при выполнении HTTP-запросов. Для этого нам нужно передать функцию catch в цепочке вызовов после вызова метода axios. Эта функция будет вызвана в случае ошибки и будет иметь доступ к объекту ошибки.

Пример кода:

axios.get('https://api.example.com')
  .then(response => {
    // обрабатываем успешный ответ
  })
  .catch(error => {
    // обрабатываем ошибку
    console.error(error);
  });

В этом примере мы выполняем GET-запрос к URL-адресу https://api.example.com с помощью axios. Если запрос выполнен успешно, будет вызван метод then и мы сможем обрабатывать ответ. Если произошла ошибка, будет вызван метод catch и мы сможем обрабатывать ошибку.

В блоке catch мы выводим ошибку в консоль с помощью console.error. Вы можете изменить эту логику и выполнить другие действия, в зависимости от ваших требований. Например, вы можете показать сообщение об ошибке пользователю или выполнить повторный запрос.

Кроме обработки ошибок на уровне каждого запроса, вы также можете обработать глобальные ошибки axios. Для этого вы можете использовать свойство interceptors.response и метод onRejected. С помощью этого метода можно задать функцию, которая будет вызываться при любой ошибке ответа от сервера.

axios.interceptors.response.use(response => {
  // обработка успешного ответа
  return response;
}, error => {
  // обработка ошибки ответа
  console.error(error);
  return Promise.reject(error);
});

В этом примере мы использовали метод interceptors.response.use для добавления функции для обработки успешного ответа и функции для обработки ошибки ответа. Если произошла ошибка ответа, будет вызвана функция errorHandler и мы сможем обработать ошибку. Обратите внимание, что мы возвращаем Promise.reject(error) для передачи ошибки дальше по цепочке обработки промисов.

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