Axios: Ошибка Axios catch возвращает ошибку javascript, а не ответ сервера

Созданный на 17 июн. 2017  ·  87Комментарии  ·  Источник: axios/axios

Я пытаюсь поймать ошибки проверки с сервера.

Код:

axios.post('/formulas/create', {
       name: "",
       parts: ""
})
.then( 
    (response) => { console.log(response) },
    (error) => { console.log(error) }
);

Вывод журнала консоли

Error: Request failed with status code 422
    at createError (app.js:6765)
    at settle (app.js:29489)
    at XMLHttpRequest.handleLoad (app.js:6600)

Вывод вкладки сети
{"name": ["Поле имени обязательно."], "parts": ["Поле для частей обязательно."]}

Я должен видеть объект, содержащий проверку формы JSON, поскольку это ответ на моей вкладке сети, кажется, я получаю вывод JS catch?

Также пробовал следующее:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error)
});

Тот же результат

Кажется, что у большего количества людей такая же проблема, использующая ту же среду, что и у меня здесь.
https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method

  • Версия Axios: ^ 0.16.2
  • VueJS 2.3.4
  • Vue-шаблон-компилятор 2.3.4
  • Laravel-микс
  • Среда: узел v6.4.0, хром 58, Mac OSX 10.12.4

Самый полезный комментарий

У меня точно такая же среда. Попробуй это:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

Измените с console.log(error) на console.log(error.response) в catch .

Вы также можете использовать глобальный перехватчик и отклонить только error.response . Проблема в том, что когда console.log пытается вывести ошибку, печатается строковое представление, а не структура объекта, поэтому вы не видите свойство .response .

Все 87 Комментарий

У меня точно такая же среда. Попробуй это:

axios.post('/formulas/create', {
    name: "",
    parts: ""
})
.then(response => { 
    console.log(response)
})
.catch(error => {
    console.log(error.response)
});

Измените с console.log(error) на console.log(error.response) в catch .

Вы также можете использовать глобальный перехватчик и отклонить только error.response . Проблема в том, что когда console.log пытается вывести ошибку, печатается строковое представление, а не структура объекта, поэтому вы не видите свойство .response .

Если кому-то интересно, как отклонить только свойство response , вот как это сделать:

axios.interceptors.response.use((response) => {
    return response;
}, function (error) {
    // Do something with response error
    if (error.response.status === 401) {
        console.log('unauthorized, logging out ...');
        auth.logout();
        router.replace('/auth/login');
    }
    return Promise.reject(error.response);
});

Важная часть: return Promise.reject(error.response);

Это дает тот же результат, если вышеупомянутое решение испортит синтаксис вашего JS-файла при отступе или уменьшении :)

.post('ajax/register/otp', this.registerData)
.then(function (response) {
       return otpSent(response)
})
.catch(function (error) {
      console.log(error.response);
 });

@ gopal-g это не определено для меня.

Что ж, @ pedro-mass в этом случае может не быть ответа со стороны сервера. в моем сценарии моим ответом был JSON, когда произошла ошибка, я мог получить ответ, используя error.response

@ gopal-g Если я смотрю вкладку «Сеть» в инструментах разработчика, я могу увидеть ответ. Это 401, если это имеет значение.

У меня такая же ошибка с @ pedro-mass.

вот мой код

async function test () {
try {
  let res = await axios.get('/xxxxx/xxxx')

} catch (e) {
  console.log(e.response) // undefined
}
}

использование "error.response" для меня не работает. Проблема возникает, когда я отключил сервер базы данных, и мой веб-сервер вернул ошибку 500.

Вкладка сети в инструментах разработчика

код ответа: 500
тело ответа:

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

ошибка хромированной консоли:

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

версия

"axios": "^ 0.15.3"

В catch есть загвоздка: если ошибка возникает до того, как запрос сделан, то в catch вас не будет свойства err.response , потому что ... ну ... .. нет ответа. Итак, catch перехватит любую ошибку. То же самое относится к ситуациям, подобным той, что была на @fabiorecife, когда нет ответа из-за сбоя сети. Не рассматривайте err как ошибку HTTP, потому что это не всегда так.

@alsofronie, так какой же предпочтительный метод обработки (различение одного от другого), например, предполетных сбоев, таких как 413?

У меня аналогичная проблема - Chrome devtools показывает 401 , ответ - {"message":"Identity token has expired"} а я catch( (error) => {...}) - но ошибка error.response пуста. Мне интересно, связано ли это с тем, что предыдущий вызов OPTIONS связанный с GET имеет статус 200 . Что делать в этом случае и где лучше всего получить код состояния 401 ?

@robbiemu Я думаю, что это уже задокументировано: https://github.com/axios/axios#handling -errors

@mrchief спасибо за это, хорошо еще раз повторить. В моем случае это решение работает в большинстве случаев, но текущая проблема, с которой я сталкиваюсь, заключается в том, что объект error.response присутствует, но поля равны undefined , любые вызовы значений внутри response объект приводит к ошибке.

@paolavness Я бы предложил открыть новый выпуск вместо того, чтобы комментировать здесь. Не многие смотрят закрытые выпуски. Или, может быть, даже спросите об этом на StackOverflow.

@mrchief А, это закрыто, спасибо, что указали на это. Сделаю.

Я была такая же проблема. В конце концов, я изменил код ошибки с 401 на 403, и все заработало так, как я ожидал. Я предполагаю, что причина пустого объекта ошибки и результирующей ошибки javascript связана с этим утверждением, которое я нашел в документации для ошибки 401:

«Ответ [ошибка 401] должен включать поле заголовка WWW-Authenticate, содержащее запрос, применимый к запрошенному ресурсу».

Поэтому, если вы собираетесь использовать ошибку 401, вы должны включить поле заголовка www-Authenticate. Если вы не хотите этого делать, просто используйте ошибку 403.

Доброе утро, ребята, у меня была эта проблема, однако я исправил ее, изменив конфигурацию apache, чтобы включить cors на моем сервере. Взгляните на ссылку ниже

https://enable-cors.org/server_apache.html

Вы можете отладить весь ответ только с помощью console.log(JSON.stringify(error))

axios.post (URL)
.then ((ответ) => {
// что-то
})
.catch ((ответ) => {
if (response.status == undefined) {
alert ('неавторизованный')
}
})

У меня была точно такая же проблема, описанная @fabiorecife . Я решил, но это не самое элегантное решение, и я не понимаю, зачем это нужно.

.catch(error=>{
let errorObject=JSON.parse(JSON.stringify(error));
console.log(errorObject);
dispatch(authError(errorObject.response.data.error));
})

Это дает ожидаемые результаты в переменной errorObject .

@petruscurtu У меня такая же проблема! Мне это не
image
Я не знаю, почему он выдает 'no Access-control-allow-origin', но сервер установил это! Заголовок ответа в порядке

image

Решено. API-интерфейс auth не отвечал на правильный заголовок, который должен иметь Access-control-allow-origin

@luxueyan Я не знаю, в чем может быть проблема, так как я не знаю, как вы обрабатываете CORS на своем сервере. Что касается axios, я вижу объект конфигурации и запроса в выводе вашей консоли. Я думаю, вам стоит проверить этот вывод. Это может быть связано с форматом ответа, который отправляет ваш сервер.

@luxueyan Похоже, что вы Access-control-allow-origin для http://localhost:8081 (при условии, что он установлен на сервере с этим адресом http://10.31.143.32:8080 ?) Вы можете проверить, какой у вас URL запускаете этот проект? Это http://localhost:8081 ? Если это не так, даже если номер порта отличается, значит, это нарушает правила домена CORS.

@petruscurtu В перехватчике ответа выводится «JSON.parse (JSON.stringify (error))». Отсутствует свойство ответа

@chiefie Я уверен, что настройка Access-control-allow-origin в порядке, поскольку другой ajax api может отвечать на правильный контент! Только api кода capcha не работает。 когда он истек , это ошибка ответа со статусом 478 и axios не может получить тело ответа!

Обновлять! Это была ошибка api сервера, в заголовке не было настроек cors. Теперь работаем хорошо.

Спасибо @ juliano-barros, это произошло из-за перекрестного происхождения. Теперь все мои запросы ajax работают нормально.

Эта необработанная ошибка выдается всякий раз, когда сервер недоступен / CORS недействителен.
error.response будет просто undefined .

Я только что создал IntegrationError, который содержит данные сообщения, статуса и ответа ... но всегда следую той же структуре. Таким образом, я могу отделить аксиомную / необработанную ошибку от моей обработки.

Ребята из Axios, я думаю, это должна быть ошибка HTTP ... включая error.response .
Это можно проверить, как указано выше

Вчера исполнился год выпуска этого номера. Будет ли это когда-нибудь «исправлено» или это будет считаться «несущественным» на данный момент?

@frostshoxx Так что я думаю, что это «не проблема». Хотя я испытываю ту же проблему, что и все остальные, теперь я понимаю, что происходит, и вижу, что это не ошибка или проблема, а просто то, как устроен мир.

Для всех, кто сбит с толку (и в честь празднования годовщины этой проблемы), позвольте мне объяснить, что происходит и как получить ответ от вашего сервера.

Как ты здесь оказался?

Есть много причин, по которым вы можете столкнуться с пустошью .catch() . Иногда Axios обнаруживает ошибку на раннем этапе запроса. Иногда это происходит с запросами CORS. Когда Axios OPTIONS недоступны, Axios паникует и отправляет вас на .catch() до того, как он фактически получит ответ от сервера, поэтому ответ в этих случаях недоступен.

Некоторые из вас могут сказать: «Нет, я вижу это в DevTools, поэтому ответ пришел!». Это не всегда верно, потому что иногда Axios запускает HTTP-запрос, выявляет ошибку, прерывается и отправляет вас на .catch() до того, как сервер ответит. Через несколько миллисекунд после того, как Axios выполнит функцию .catch() ваш сервер может вернуться с ответом, который появляется в DevTools, потому что он все еще ожидает ответа. Однако на данный момент Axios уже давно готов, поэтому response не было доступно, потому что его не существовало в то время, когда Axios инициировал функцию .catch() .

Тем из вас, кто получает сообщение об ошибке 4XX или 5XX от сервера, повезло! Обычно ответ от сервера доступен вам, потому что для того, чтобы получить эту ошибку, Axios пришлось ждать полного ответа сервера. В этих случаях Axios отправляет вас на .catch() с response но он оборачивает ответ в свой собственный объект error который он создает на лету.
Так что, если вы получаете ошибки 5XX или 4XX , возможно, вам доступен ответ сервера, но он скрыт ГЛУБОКО!

Попробуйте error.response.data.data.message . Подтверждено, что это работает для запросов API Laravel, которые возвращают ошибки сервера.

Пользователи, не использующие Laravel - вам нужно будет, по крайней мере, перейти на error.response.data чтобы получить основной ответ от сервера, но большинство серверов не оборачивают свои ответы в другой объект data{} требующий перехода слой глубже, а затем, наконец, получите доступ к желаемому свойству ответа, например .message оттуда.

Но я сделал Console.Log, и он не ответил!

Да, я знаю, но в любом случае попробуйте вывести error.response.data чтобы меня развеселить.

По какой-то причине Axios изменяет вывод console.log(error) на объекте ошибки. Я не уверен, почему они это делают, но если вы вместо этого напишете console.log(JSON.stringify(error)) вы увидите весь объект во всей его красе.

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


Если вы получаете ошибку 500 или ошибку типа 400 (или действительно любой код ошибки, предоставленный сервером) в Axios, то это означает, что запрос выполнен и вам доступен ответ сервера!

Проблема в том, что он очень глубокий, и поскольку Axios изменяет вывод нашего console.log(error) который большинство людей делают, чтобы увидеть объект error{} , большинство людей не знают, что он существует. Но это есть!

@ VSG24 человек !! это спасительный ответ: D

fwiw, JSON.stringify(error) бомбы в 0.18.0 из-за циклических ссылок.

Я установил перехватчик, который дает мне ответ сервера при ошибке

axios.interceptors.response.use(
  response => {
    // do someting on response
    return response
  },
  error => {
    // do someting on errir
    return Promise.reject(error.response.data) // => gives me the server resonse
  }
)
    try {
      const { data } = await htttp.post(login, payload)
      // do someting with data
    } catch (e) {
      console.log(e) // server response data
    }

@alimirayman Кажется, все будет нормально, если нам не нужно следить за каждым запросом. Но когда вам нужно отслеживать каждый запрос, неразумно повторять обработчик ошибок в каждом месте моего кода. Если я не понял неправильно (что может быть так), axios не нужно проверять, вернул ли сервер ошибку, прежде чем он выдаст ошибку?

@ hhowe29 используйте circular-json

Я нашел эту ветку, как и многие другие, и использую axios с модулями vue.js и vuex.

Мое действие модуля vuex улавливает ошибку axios и запускает фиксацию (ERROR_HAPPENED, ошибка), чтобы запустить мутацию ERROR_HAPPENED модуля vuex. Но ошибка возникает без его свойства response, что приводит к тому, что error.response не определен, если я пытаюсь установить ответ на состояние vuex.

Если я использую console.log (error.response) в действии до commit (), я могу увидеть ответ. Так что, скорее всего, это искажено vuex.

Либо зафиксируйте (ERROR_HAPPENED, error.response.data), либо проверьте, есть ли в действии 401, и запустите другую фиксацию в зависимости от кода состояния. Потому что это искажение происходит только с кодом 401. Другие ошибки, такие как 404 или 500, передаются моим мутациям.

Не покалечено. Vuex не исключает этого, даже по ошибке.
Из-за некоторых ошибок, в основном внутри перехватчиков Axios, это не раскрывается.

Какое-то обновление?

@AllanPinheiroDeLima, извините за поздний ответ, но я не думаю, что кто-то пишет перехватчик на каждом отдельном месте чьего-либо кода. Мы пишем перехватчик один раз на базе кода и используем его как вспомогательный класс, номер 1. Номер 2, первоначальный запрос заключался в том, что они не получили _server error response_, вместо этого они получили _javascript error_ в try catch block. Было 2 решения: первое, чтобы изменить способ ответа сервера на ошибку или способ обнаружения ошибки во внешнем интерфейсе. axios error Intercepter в основном действует как промежуточное программное обеспечение для решения этой проблемы, если вы не хотите изменять свои способы кода или изменять большую базу кода.

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

У меня такая же проблема. Используя в перехватчике Axios console.log('interceptors', JSON.stringify(error)) я получаю этот журнал interceptors {"config":{"transformRequest":{},"transformResponse":{},"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json;charset=utf-8"},"method":"post","url":"http://localhost:5000/api/autenticacao/login","data":"{\"siglaInstituicao\":\"NEAS\",\"usuario\":\"emersoncpaz\",\"senha\":\"belle1903\"}"},"request":{}} но ответ chrome devtools у меня есть правильный ответ от api: A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: Named Pipes Provider, error: 40 - Could not open a connection to SQL Server) Как получить этот ответ от axios?

По какой причине ошибки 5xx не обрабатываются блоком catch (не возвращает объект ответа)? Код состояния 502 отображается в консоли DevTool, но не обрабатывается Axios.

Это сработало для меня (с помощником прерывания laravel: abort (500, 'message'))
`` ''
.catch (error => {
console.log (error.response.data.message);
});

`` ''

Есть ли у кого-нибудь полный рабочий пример, кроме фрагмента кода, говорящего, что это сработало? Отрезок из 1 строки не очень помогает, если вы не знаете, на кого они ссылались в этой ветке, куда они поместили этот фрагмент кода, как выглядит окончательный рабочий код?

Я пытаюсь отловить ошибку в инерцепторе и на основе кода ошибки либо заканчиваю запрос там с перенаправлением, если 401 для входа в систему, либо если его 422 позволяет запросу вернуться к вызывающему компоненту, чтобы разрешить обновление ошибок формы.

Любые идеи?

Я использую Nuxt axios, и мой перехватчик onResponseError выглядит так:

$axios.onResponseError(error => {
    const code = parseInt(error.response && error.response.status)
    console.log(code, 'Axios onResponseError')
    console.log(error.response.status, 'status')
    console.log(error.config, 'config')
    console.log(error.response, 'response')
    // Do something with response error
    if (error.response.status === 401) {
      console.log('unauthorized, logging out ...')
      app.$auth.logout()
      redirect('/login')
    }
    if (code === 400) {
      // redirect('/400')
      console.log(`400 onResponseError`)
    }
    if (code === 408) {
      console.log(`A timeout happened on url onResponseError`)
    }
    if (code === 418) {
      console.log(`A teapot onResponseError`)
    }
    if (code === 428) {
      console.log(`428 onResponseError`)
      // redirect('/login')
    }
    return Promise.reject(error)
  })

И пример вызова будет выглядеть так:

async postRecord (clear = false) {
      try {
        const { r } = await this.$axios.$post(this.endPoint, this.formData)
        console.log(r, 'response')
        // do something with response
      } catch (e) {
        console.log(e, 'error in crud') // server response data
        // i should never get here if error since the interceptor should kill the request if 401
       // for testing this request is returning a 401
      } finally {
        this.submitted = false
      }
    },

Спасибо,
Дэйв

Когда нет интернета, ошибка error.response не определена - это лучший способ?

Я получаю ошибку в виде обычного текста, мне пришлось использовать следующее, чтобы преобразовать ошибку в объект.

var errorObj = JSON.parse(JSON.stringify(error));

Это связано с сервером, а не с аксиомами, пробовали ли вы копаться в
error.response.status, если он не определен, значит, вы знаете, что это Интернет.
проблема с подключением или синтаксическая ошибка в вашем JS

В среду, 2 января 2019, 15:40 Ибрагим Азхар Армар < [email protected]
написал:

Я получаю ошибку в виде обычного текста, мне пришлось использовать следующее, чтобы преобразовать ошибку в
объект.

var errorObj = JSON.parse (JSON.stringify (ошибка));

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/axios/axios/issues/960#issuecomment-450896476 или отключить звук
нить
https://github.com/notifications/unsubscribe-auth/AEETt2r3bt2QCixDlzh4fZvWp_1rPkxuks5u_NMEgaJpZM4N9Ljl
.

@kgrosvenor Я axios сработает тайм-аут. Я считаю, что сервер в этот момент не отвечает, поэтому запускается обратный вызов в axios.

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

Если это так, я пытаюсь понять, что на сервере может вызывать это?

Скорее всего, у вас истекло время ожидания, попробуйте проверить, существует ли в ошибке «ответ».

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

Программист Java отправляет мне сообщение об ошибке с ошибкой 500, и я не могу обработать это сообщение. Поэтому я прошу его вернуть в ответ статус 200 с сообщением об ошибке, но он зол на меня и говорит, что его HTTP-клиент видит все сообщения со статусом 500. Он думает, что я глуп, потому что не могу найти сообщение об ошибке со статусом 500. Как мне объяснить ему, что axios не обрабатывает сообщение об ошибке 500?

Программист Java отправляет мне сообщение об ошибке с ошибкой 500, и я не могу обработать это сообщение. Поэтому я прошу его вернуть в ответ статус 200 с сообщением об ошибке, но он зол на меня и говорит, что его HTTP-клиент видит все сообщения со статусом 500. Он думает, что я глуп, потому что не могу найти сообщение об ошибке со статусом 500. Как мне объяснить ему, что axios не обрабатывает сообщение об ошибке 500?

Фактически, вы должны иметь возможность обрабатывать ошибку со статусом 500, вы можете проверить статус http в ответ и решить, как обрабатывать его на стороне клиента. Это уже задокументировано в этой ссылке (https://github.com/axios/axios#handling-errors)

Вот как я ловлю ошибку 500 с сервера, и у меня это работает.

.catch(function (error) {
    var errorObj = JSON.parse(JSON.stringify(error));
    console.log(errorObj);
    if (errorObj.code == 'ECONNABORTED') {
        alert('Connection timed out.');
    }
});

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

Я также получаю сообщение об ошибке error.response undefined, затем я пытаюсь выполнить код ниже.

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  // Do something with response error
  let {response} = error;
  // response?.status === 401 es7 way.
  if (response && response.status === 401) {
    // Do logout;
    // Redirect to login;
    return Promise.reject(error.response);
  } 
  else if (error.response){
    // Do something.
    console.log('some API_CLIENT error');
    return Promise.reject(error.response);
  }
 return Promise.reject(error);
});

Это очень плохо, важна обработка ошибок.

Как дела? У меня все еще такая же проблема с версией 0.18.0!

такая же проблема для меня: @nuxtjs/axios v5.0.0

Это ошибка

Дэниел Стерн [email protected]于 2019 2 28 周四 04:39 :

Позвольте мне резюмировать это обсуждение.

tl; dr:
ВСЕМ Проблема заключается в том, что неспособность уловить ошибки HTTP.
РАЗРАБОТЧИКИ Невозможность перехвата ошибок HTTP

-
Вы получили это, потому что прокомментировали.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/axios/axios/issues/960#issuecomment-468020991 или отключить звук
нить
https://github.com/notifications/unsubscribe-auth/AAN8CbMHohyuSZHYlcieD_5yUqizpkSYks5vRuzygaJpZM4N9Ljl
.

Вы должны упомянуть об этой проблеме в README, пожалуйста, очень полезно. Спасибо!

https://github.com/axios/axios/issues/960#issuecomment -320659373

Согласен с другими плакатами. Наличие объекта с непредсказуемой структурой, присвоенного catch зависимости от того, где происходит ошибка, - это не очень хорошо. И error.response и JSON.stringify(error) могут сами по себе вызывать ошибку в зависимости от причины. Предлагаемый подход на https://github.com/axios/axios#handling -errors тоже не очень полезен.

Необходимость выполнять все эти акробатические трюки, чтобы вернуть долбанное сообщение об ошибке, смущает в 2019 году. Это было бы неловко в 1990 году. Серьезно, люди JS, улучшайте свою игру. Изучите дизайн API и поймите, что ваши «творческие решения» обходятся тысячам людей бесчисленными часами на устранение беспорядка, который вы сознательно игнорируете.

Для тех, кто борется с круговыми ссылками, вы можете сделать что-то вроде этого:

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

Для тех, кто борется с круговыми ссылками, вы можете сделать что-то вроде этого:

try {
// your axios request
} catch (error) {
  const { response } = error;
  const { request, ...errorObject } = response; // take everything but 'request'
  res.status(response.status);
  return res.json(errorObject); // or use 'return res.json(response.data.error);' then you don't need to omit the 'request'
}

Спасибо, парень! это код отлично работал у меня.

Проблема находится в "lib / core /hanceError". К ошибке добавлен объект запроса. Имеет смысл добавить ответ к ответу, поскольку в API на основе обещаний есть только один параметр (библиотека запросов возвращает ошибку в качестве первого параметра, а ответ - в качестве второго). Но нет смысла добавлять все запрос. Изменить код очень просто https://github.com/geoblink/axios/pull/1/files
Я мог бы открыть pr для основной ветки, если это кажется важным (я не делаю этого, так как проблема закрыта)

вы можете создать оболочку функции, которую вы будете вызывать каждый раз при выполнении запросов

const api = async (uri, data) => {
  try {
    const { data: response } = await axios({
      url: domain + uri,
      method: 'POST',
      data,
    });

    return response.data;
  } catch (error) {
    throw error.response.data;
  }
};

Скорее всего, у вас истекло время ожидания, попробуйте проверить, существует ли в ошибке «ответ».

axios.get()
.then(function(done) {
   //fine and can get done.data
})
.catch(function(err) {
  //catch the error, check it has a response object with lodash 
  if(_.has(err, 'response') {
     console.log(error.response.status);  
     console.log(error.response.data);
 } 
 else {
    console.log("Most likely a server timeout or an internet connection error");
    console.log("error response property is undefined")
 }
}); 

Это сработало для меня. Спасибо

использование "error.response" для меня не работает. Проблема возникает, когда я отключил сервер базы данных, и мой веб-сервер вернул ошибку 500.

Вкладка сети в инструментах разработчика

код ответа: 500
тело ответа:

{
  "error": {
    "statusCode": 500,
    "name": "Error",
    "message": "read ETIMEDOUT",
    "code": "ETIMEDOUT",
    "errno": "ETIMEDOUT",
    "syscall": "read",
    "stack": "Error: read ETIMEDOUT\n    at exports._errnoException (util.js:1050:11)\n    at TCP.onread (net.js:582:26)"
  }
}

ошибка хромированной консоли:

Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:15)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

версия

"axios": "^ 0.15.3"

ТО ЖЕ САМОЕ...

По моему опыту:

«Измените console.log (ошибка) на console.log (error.response) в catch».

лучше работал с console.log (error.response.data) в catch.

axios.interceptors.response.use (null, error => {
вернуть error.response;
});

getClients: async (состояние) => {
const res = ожидание axios.get ( ${BASE_API}/clients );
console.log ('разрешение', разрешение);
if (res) {
state.commit ("setClient", res.data);
}
}

Другой вариант

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="6">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

Пытаться{
Жду этого. $ Axios .....
} catch (e)
{
console.log (e)

}

axios.get("https://......") 
     .then( response => {
          return response
}).catch( () => {
         store.dispatch("errorComponentMethod")   // if there's an error, method is dispatched
})
//////////////////////////////////////
actions : {
      errorComponentMethod(){
              router.push("/errorComponent")     // method routes to error component
      }
}

Большое спасибо ! Очень помогло!

все еще возникает эта проблема. в отладчике Chrome ответ правильный, но вместо этого axios возвращает общий "Request failed with status code 403"

У меня все еще есть это, и я действительно запутался. Я попытался уловить, что это комментарии выше, но почему именно axios возвращает undefined при возникновении ошибки?
try{ const res = await axios.get("someurl"); return res; } catch(e) { console.log(e); }
res не определено, даже если сервер отправляет ответ с сообщением, ПОЧЕМУ это не сработало. И я не могу добраться до этих данных ... почему ??

** РЕДАКТИРОВАТЬ: нашел мою ошибку - для меня нет ничего плохого с аксиомами. Смотрите мой комментарий двумя комментариями ниже. Короче говоря, мои перехватчики не передавали данные об ошибках обратно через конвейер axios, поэтому я всегда получал undefined.

@HoogsterInc Взгляните на определения TypeScript здесь
ты мог бы сделать что-то вроде этого

try {
   axios.get(...)
} catch (error) {
   if (error.reponse) {
      // http status 4x, 5xx
   } else {
      // network error like timeout, connection refused etc...
   }
}

Спасибо за ответ, который пытался помочь @konstantinblaesi - я понял свою проблему.

Для меня у меня был настроен перехватчик для проверки аутентификации пользователя, который, если он становится несанкционированным, отправляет определенный код ошибки. Однако я не передавал данные об ошибке, когда ошибка не соответствовала несанкционированному коду ... вздох ... глупая плохая ошибка. Поэтому после проверки неавторизованного кода ошибки я обязательно вернул Promise.reject (error); - Это решило мою проблему, и теперь все данные об ошибках поступают полностью.

Вы можете использовать err.toJSON()

catch((err) => {
    console.log(err.toJSON()); // Return error object
});

https://github.com/axios/axios#handling -errors

(установлен для глобального)

в main.js

import axios from 'axios'

var instance = axios.create(
 { validateStatus: function (status) {
    return status < 600; #you can change this with another value
  }
 });

или
(установить в частности)

  axios.post('/formulas/create', {
       name: "",
       parts: ""
  }, { validateStatus: function (status) {
          return status < 600; // Reject only if the status code is greater than or equal to 500
        }})
    .then( 
   (response) => { console.log(response) },
   (error) => { console.log(error) }
   );

Axios & catch 500 данные ответа на ошибку

const log = console.log;

  updateData(options = {}, flag = false){
    let url = `/opapi/appDownloadGuide/update`;
    let message = '更新成功!';
    let errorMessage = '更新失败!';
    if (flag) {
      message = '添加成功!';
      errorMessage = '添加失败!';
      url = `/opapi/appDownloadGuide/add`;
    }
    axios
    .post(url, options)
    .then(res => {
      // ❓🤔️500 , 在这里拦不住呀?
      log(`res`, res, res.status);
      return res.data;
    })
    .then(json => {
      const {
        code,
        success,
        data,
        errorCode,
        errorHint,
      } = json;
      if(code === 200) {
        this.$message({
          type: 'success',
          message,
        });
        this.init();
      } else{
        this.$message({
          type: 'error',
          message: `${errorMessage}: ${errorHint ? errorHint : ""}`,
        });
      }
    })
    .catch(err => {
      // 👌在这里拦截 error data!
      log(`error.response`, err.response);
      const {
        data,
        status,
        statusText,
      } = err.response;
      this.$message({
        type: "error",
        message: `${statusText}-${status}: ${data || ""}`,
        // message: "不能重复创建",
      });
      console.error(`500 err`, err);
    });
  },

https://stackoverflow.com/questions/38798451/how-to-catch-and-handle-error-response-422-with-redux-axios

У меня точно такая же среда. Попробуй это:

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error.response)
});

_Измените значение console.log(error) на console.log(error.response) в catch _.

Вы также можете использовать глобальный перехватчик и отклонить только error.response . Проблема в том, что когда console.log пытается вывести ошибку, печатается строковое представление, а не структура объекта, поэтому вы не видите свойство .response .

У меня не работает

@ gopal-g это не определено для меня.

@ gopal-g да же undefined я получаю.

Я использую Axios 0.19.2. Я добавил решение @konstantinblaesi :

Другой вариант

/**
 * Whenever error.message is accessed we want to se the full API error message (JSON) if it's present
 * not just some generic http status code + message
 * see https://github.com/axios/axios/issues/960 for context
 *
 * <strong i="9">@param</strong> axios
 */
export function extractAPIErrorResponse(axios: AxiosInstance) {
    axios.interceptors.response.use(undefined, function (error: AxiosError) {
        (error as any).originalMessage = error.message;
        Object.defineProperty(error, "message", { get: function () {
            if (!error.response) {
                return (error as any).originalMessage;
            }
            return JSON.stringify(error.response.data);
        }});
        return Promise.reject(error);
    })
}

У меня это сработало, большое спасибо @konstantinblaesi ! Я не понимаю, почему поведение Axios по умолчанию не похоже на это - стандартное поведение - отбрасывать «сообщение» из исходной ошибки, что, на мой взгляд, является наиболее важной частью!

Чтобы быть ясным, в моем приложении мой сервер возвращает ошибку 400 (которая должна быть ответом):

% curl -X POST http://my-server/api -d '{"foo": "bar"}'
{"status": 400, "message": "missing param XYZ"}

и без этого исправления я получаю от Axios объект ошибки, содержащий только name , stack , config (с исходным запросом) и без «ответа». Но с этим исправлением ошибка содержит правильное свойство message с сервера.

Что касается того, почему нет свойства response без этого исправления, похоже, оно связано с settle в axios.js около строки 1171:

        module.exports = function settle(resolve, reject, response) {
          var validateStatus = response.config.validateStatus;
          if (!validateStatus || validateStatus(response.status)) {
            resolve(response);
          } else {
            reject(createError(
              'Request failed with status code ' + response.status,
              response.config,
              null,
              response.request,
              response
            ));
          }
        };

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

Я пытаюсь поймать ошибки проверки с сервера.

Код:

axios.post('/formulas/create', {
       name: "",
       parts: ""
})
.then( 
  (response) => { console.log(response) },
  (error) => { console.log(error) }
);

Вывод журнала консоли

Error: Request failed with status code 422
    at createError (app.js:6765)
    at settle (app.js:29489)
    at XMLHttpRequest.handleLoad (app.js:6600)

Вывод вкладки сети
{"name": ["Поле имени обязательно."], "parts": ["Поле для частей обязательно."]}

Я должен видеть объект, содержащий проверку формы JSON, поскольку это ответ на моей вкладке сети, кажется, я получаю вывод JS catch?

Также пробовал следующее:

axios.post('/formulas/create', {
  name: "",
  parts: ""
})
.then(response => { 
  console.log(response)
})
.catch(error => {
    console.log(error)
});

Тот же результат

Кажется, что у большего количества людей такая же проблема, использующая ту же среду, что и у меня здесь.
https://laracasts.com/discuss/channels/vue/issues-with-axios-catch-method

  • Версия Axios: ^ 0.16.2
  • VueJS 2.3.4
  • Vue-шаблон-компилятор 2.3.4
  • Laravel-микс
  • Среда: узел v6.4.0, хром 58, Mac OSX 10.12.4

axios.post ('/ формулы / создать', {
название: "",
части: ""
})
.тогда(
(ответ) => {console.log (ответ)},
) .catch (err => consol.log (err.response.data)});

error.response - это объект, он выведет [объект, объект] в журнал консоли.
вы должны использовать error.reposne.data для доступа к сообщению об ошибке.
обратитесь: https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

@chandukasm да, но в моем случае у меня _не_ есть error.response - он не определен, даже если запрос был отправлен, а ответ получен экспрессом. Также см. Мой комментарий выше; сообщение игнорируется (заменяется общим сообщением) даже при наличии ответа.

error.response - это объект, он выведет [объект, объект] в журнал консоли.
вы должны использовать error.reposne.data для доступа к сообщению об ошибке.
обратитесь: https://itnext.io/javascript-error-handling-from-express-js-to-react-810deb5e5e28

если вы видите [объект, объект] в console.log, просто выполните JSON.stringify (error.response), чтобы увидеть фактическую ошибку.

Нет объекта error.response .

return this.$axios
  .post(postUrl, payload, { responseType: 'json' })
  .then(
    (response) => {
      this.message = `RESP: ${JSON.stringify(response)}`;
    },
    (reason) => {
      this.message = `REAS: ${JSON.stringify(reason)}`;
    }
  )
  .catch((err) => {
    this.message = `CATCH: ${JSON.stringify(err)}`;
  });

полезная нагрузка содержит недопустимое значение для запуска HTTP 422, который в Postman работает так, как ожидалось, и сервер (LB4) возвращает полную ошибку в формате JSON, объясняя, где входные данные были неправильными, но в axios объект error.response не определен .

Была ли эта страница полезной?
0 / 5 - 0 рейтинги