Как правильно обрабатывать ошибки axios и как получить подробные описания ошибок?

Question

У меня есть вопрос об аксиосах и обработке ошибок. Так что это метод, который я использую для обработки ошибок при входе пользователя из внешнего интерфейса:

    axios.post('http://localhost:3001/login',
        {
            login: user.login,
            password: user.password,
        }
    )
    .then(
        (response) => {
            // code
        },
        (error) => {
            // error handling
        }
    );

Это второй метод:

    axios.post('http://localhost:3001/login',
        {
            login: user.login,
            password: user.password,
        }
    )
    .then(
        (response) => {
            // code
        }
    ).catch((error) => {
        // error handling
    });

Каков наилучший подход? Это то же самое? Когда сервер недоступен, сообщение об ошибке остается тем же: «Ошибка сети». Есть ли способ получить более подробную ошибку? (Например, в консоли я получаю сообщение об ошибке CORS)

Answer 1

Ошибка может возникать в разных частях - Запрос, Ответ.

Ошибки запроса возникают при отсутствии ответа. Как 404 и т. Д., Который не имеет ответа по умолчанию.

Ошибки ответа возникают, когда API отправляет пользовательский ответ для обработки ошибок.

Я использовал для обработки следующим образом:

const handleErrorResponse = (error) => {
  let errorResponse;
  if(error.response && error.response.data) {
    // I expect the API to handle error responses in valid format
    errorResponse = error.response.data;
    // JSON stringify if you need the json and use it later
  } else if(error.request) {
    // TO Handle the default error response for Network failure or 404 etc.,
    errorResponse = error.request.message || error.request.statusText;
  } else {
    errorResponse = error.message;
  }
  throw new Error(errorResponse);
}

теперь

axios.get(/foo/bar)
.then(res => doSOmething())
.catch(err => handleErrorResponse(err))

Я использую ошибку, обрабатывая ответ об ошибке как строку. То же самое вы можете использовать с аксиальным перехватчиком, если вам нужно.

Answer 2

Это недопустимо, then принимает один аргумент

.then(
        (response) => {
            // code
        },
        (error) => {
            // error handling
        }
    );

Только это допустимо

.then(
        (response) => {
            // code
        }
    ).catch((error) => {
        // error handling
    });