Axios: Axios catch错误返回javascript错误而不是服务器响应

创建于 2017-06-17  ·  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":["name 字段是必需的。"],"parts":["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-mix
  • 环境:node v6.4.0,chrome 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.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.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”不起作用。 当我断开数据库服务器并且我的 Web 服务器返回错误 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 :

@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(网址)
.then((响应) => {
// 某物
})
.catch((响应) => {
如果(响应状态==未定义){
警报('未经授权')
}
})

我遇到了@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

解决。 auth api 没有响应必须具有 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可以响应正确的内容!只有capcha code api出错。 当它过期时,它响应478状态错误,axios不能得到响应体!

更新! 这是服务器api错误,标题中没有cors设置。 现在运作良好。

谢谢@juliano-barros 这是因为跨域。 现在我所有的 ajax 请求都可以正常工作。

每当服务器无法访问/CORS 无效时,就会抛出此原始错误。
error.response将只是undefined

我刚刚创建了一个包含消息、状态和响应数据的 IntegrationError ......但始终遵循相同的结构。 通过这种方式,我可以将 axios/raw 错误与我的处理分离。

Axios 伙计们,我认为这应该是 HTTP 错误……包括error.response
这可以检查如上

昨天是这个问题的一周年纪念日。 它会得到“修复”还是在这一点上被认为是“非问题”?

@frostshoxx所以我认为这是一个“非问题”。 虽然我和其他人都遇到了同样的问题,但我现在明白发生了什么,我可以看到这不是错误或问题,而只是世界运作的方式。

对于每个感到困惑的人(为了庆祝这个问题一岁了),让我解释一下正在发生的事情以及如何获得服务器响应。

你是如何来到这里的?

您可能会遇到.catch()荒地的原因有很多。 有时 Axios 会在请求的早期遇到错误。 这有时会发生在 CORS 请求中。 当 Axios OPTIONS 不可用时,Axios 会在它实际从服务器获得响应之前恐慌并将您发送到.catch() ,因此在这些情况下响应不可用。

你们中的一些人可能会说,“不,我在 DevTools 中看到它,所以响应回来了!”。 这并不总是正确的,因为有时 Axios 会启动 HTTP 请求,遇到错误,中止自身并在服务器响应之前将您发送到.catch() 。 Axios 运行.catch()函数几毫秒后,您的服务器可能会返回响应,该响应显示在 DevTools 中,因为它仍在侦听响应。 但是Axios在这一点上早就做完了,所以response不可用,因为它在Axios启动.catch()函数的时候还不存在。

那些从服务器收到有关4XX5XX错误消息的人有幸! 通常有来自服务器的响应可供您使用,因为为了获得此错误,Axios 必须等待完整的服务器响应。 在这些情况下,Axios 使用response将您发送到.catch() ,但它会将响应包装在它自己动态创建的error对象中。
因此,如果您收到5XX4XX错误,那么您可能有可用的服务器响应,但它被埋没了!

试试error.response.data.data.message 。 这被确认适用于返回服务器错误的 Laravel API 请求。

非 Laravel 用户——你至少需要error.response.data才能从服务器获得核心响应,但大多数服务器都将他们的响应包装在另一个data{}对象中,要求你去一个更深一层,然后最后从那里访问您想要的响应属性,如.message

但是我做了 Console.Log 并且它没有响应!

是的,我知道,但无论如何只是尝试输出error.response.data只是为了逗我。

出于某种原因,Axios 在错误对象上修改了console.log(error)的输出。 我不知道他们为什么这样做,但是如果你改为写console.log(JSON.stringify(error)) ,那么你会看到整个对象的光彩。

这是序列化的 JSON,在大约 2 层深后变得难以阅读。 因此,您应该复制完整内容并将其粘贴到JSON 美化器中以探索错误对象的结构。


如果您在 Axios 中收到 500 错误或 400 类型错误(或实际上是任何服务器提供的错误代码),那么这意味着请求已完成并且服务器的响应可供您使用!

问题是它超级深,而且因为Axios 修改了我们的console.log(error)的输出,大多数人为了看到error{}对象而这样做,所以大多数人不知道它的存在。 但它就在那里!

@VSG24伙计!! 这是一个拯救生命的答案:D

fwiw,由于循环引用,0.18.0 中的JSON.stringify(error)炸弹。

我设置了一个拦截器,它在错误时为我提供服务器响应

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

我发现这个线程像许多其他线程一样,我正在使用带有 vue.js 和 vuex 模块的 axios。

我的 vuex 模块操作捕获 axios 错误并运行 commit(ERROR_HAPPENED, error) 以运行 vuex 模块的 ERROR_HAPPENED 突变。 但是错误到达时没有响应属性,如果我尝试将响应设置为 vuex 状态,则会导致 error.response 未定义。

如果我在操作中使用 console.log(error.response),在 commit() 之前,我可以看到响应。 所以它很可能被 vuex 破坏了。

要么 commit(ERROR_HAPPENED, error.response.data) 要么检查它是否是操作中的 401 并根据状态代码运行其他一些提交。 因为这种修改只发生在 401 代码中。 其他错误如 404 或 500 会传递给我的突变。

没有被破坏。 Vuex 不会破坏这一点,甚至不会被 bug 破坏。
某些类型的错误,主要是在 Axios 拦截器中,导致它没有被暴露。

一些更新?

@AllanPinheiroDeLima抱歉回复晚了,但我认为没有人在任何人的代码的每个位置都编写拦截器。 我们在代码库上编写了一次拦截器并将其用作帮助类,这是第 1 号。第 2 号,最初的查询是他们没有得到 _server error response_,而是在try catch得到了 _javascript error_ axios错误拦截器基本上充当解决该问题的中间件。

是的,我同意。 我找到了解决此问题的方法,将其集成到我自己的服务器中,而不是使用原始密钥斗篷。 这样我就可以拦截服务器中的错误,然后向前端发送一个清晰的错误。 我认为这是目前解决此类问题的唯一方法:)

我还有同样的问题。 在 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 获得这个响应?

catch 块不处理 5xx 错误的任何原因(不返回响应对象)? 状态代码 502 出现在 DevTool 控制台中,但不会被 Axios 处理。

这对我有用(使用 laravel 中止助手:abort(500, 'message'))
``
.catch(错误 => {
console.log(error.response.data.message);
});

``

除了代码片段说这有效之外,还有没有人有完整的工作示例? 如果你不知道他们在这个线程中指的是谁,他们把那段代码放在哪里,最终的工作代码是什么样的?

我试图在 inerceptor 中捕获错误,并根据错误代码,如果 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));

这取决于服务器而不是 axios,您是否尝试过深入研究
error.response.status,如果它是未定义的,那么你就知道它是一个互联网
JS 中的连接问题或语法错误

在星期三,2019年1月2日,15:40·易卜拉欣爱资哈尔阿马尔< [email protected]
写道:

我在纯文本中收到错误,我不得不使用以下内容将错误转换为
一个东西。

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


您收到此消息是因为您发表了评论。
直接回复本邮件,在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

这是一个错误

Daniel Stern [email protected]于 2019 年 2 月 28 日周四 04:39 写道:

让我总结一下这次讨论。

tl;博士:
每个人无法捕获 HTTP 错误是一个问题。
开发人员无法捕获 HTTP 错误不是问题。


您收到此消息是因为您发表了评论。
直接回复本邮件,在GitHub上查看
https://github.com/axios/axios/issues/960#issuecomment-468020991或静音
线程
https://github.com/notifications/unsubscribe-auth/AAN8CbMHohyuSZHYlcieD_5yUqizpkSYks5vRuzygaJpZM4N9Ljl
.

你必须在自述文件中提到这个问题,非常有帮助。 谢谢!

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

同意其他海报。 根据错误发生的点将具有不可预测结构的对象赋予catch并不是很好。 error.responseJSON.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/enhanceError”上。 请求对象被添加到错误中。 向答案添加响应是有意义的,因为在基于 Promise 的 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”不起作用。 当我断开数据库服务器并且我的 Web 服务器返回错误 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中从console.log(error)修改为console.log(error.response)。”

在 catch 中使用 console.log(error.response.data) 效果更好。

axios.interceptors.response.use(null, error => {
返回错误响应;
});

getClients:异步(状态)=> {
const res = await axios.get( ${BASE_API}/clients );
console.log('res',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)
{
控制台日志(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 对我来说没有问题。 看到我的评论两条评论。 简而言之,我的拦截器没有通过 axios 管道将错误数据传回,所以我总是未定义。

@HoogsterInc这里查看
你可以做这样的事情

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 是的,我得到了同样的未定义。

我正在使用 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);
    })
}

这对我有用,非常感谢

需要明确的是,在我的应用程序中,我的服务器返回 400 错误(应该是响应):

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

如果没有这个修复,我从 Axios 得到一个错误对象,它只包含namestackconfig (具有原始请求),并且没有“响应”。 但是通过此修复,错误包含来自服务器的正确message属性。

至于为什么没有这个修复就没有“响应”属性,它似乎与 axios.js 中的settle 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":["name 字段是必需的。"],"parts":["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-mix
  • 环境:node v6.4.0,chrome 58,Mac OSX 10.12.4

axios.post('/公式/创建', {
名称: ””,
部分: ””
})
。然后(
(响应) => { console.log(响应) },
).catch(err => consol.log(err.response.data)});

error.response 是一个对象,它将在控制台日志中输出 [object,object]。
您必须使用 error.reposne.data 来访问错误消息。
参考: https :

@chandukasm是的,但在我的情况下,我error.response - 它是未定义的,即使请求已发送并且响应已由快递收到。 另请参阅我上面的评论; 即使存在响应,消息也会被忽略(由通用消息替换)。

error.response 是一个对象,它将在控制台日志中输出 [object,object]。
您必须使用 error.reposne.data 来访问错误消息。
参考: https :

如果您在 console.log 上看到 [object,object] 则只需执行 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 等级

相关问题

c0debreaker picture c0debreaker  ·  3评论

shaosh picture shaosh  ·  3评论

altruisticsoftware picture altruisticsoftware  ·  3评论

Spartano picture Spartano  ·  3评论

achingbrain picture achingbrain  ·  3评论