无法捕获并记录来自 axios 请求的错误响应
Posted
技术标签:
【中文标题】无法捕获并记录来自 axios 请求的错误响应【英文标题】:Unable to catch and log the Error response from an axios request 【发布时间】:2017-12-02 01:05:06 【问题描述】:我的 react 应用程序中有一个 axios 请求,为此我正在关注 axios npm docs.
这是我的 axios 请求
axios.post(helper.getLoginApi(), data)
.then((response) =>
console.log(response);
this.props.history.push(from.pathname)
)
.catch((error)=>
console.log(error);
)
我能够成功记录成功请求的数据。但是,当我故意产生错误并尝试对其进行 console.log 时,我没有得到记录的结果,而是看到了
POST http://localhost:3000/login 401(未经授权) :3000/登录:1 错误:请求失败,状态码为 401 login.js:66
在 createError (createError.js:16)
安顿下来 (settle.js:18)
在 XMLHttpRequest.handleLoad (xhr.js:77)
但是,当我转到 Chrome 控制台中的网络选项卡时,我可以看到以下响应返回。
提前感谢您的帮助。
【问题讨论】:
您是否尝试过将您的 axios 包装到try catch(e)
语句中?你试过检查then
里面的response.status
吗?只是一些想法 - 我不知道为什么它不起作用
@lumio,正如我所说,在 .then 中,我能够成功登录 response.data
但不能登录 .catch
块
即使我自己使用 axios,我也不确定当状态不是 2xx
时 axios 是否总是失败。当response.status
不是 200 时,您是否尝试在 then
中抛出错误?
我没有尝试过,一旦我尝试了@ShubhamKhatri 发布的答案并且如果它不起作用,我会这样做
【参考方案1】:
来自 Github Docs。 axios 请求的响应看起来像
// `data` is the response that was provided by the server
data: ,
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: 'OK',
// `headers` the headers that the server responded with
// All header names are lower cased
headers: ,
// `config` is the config that was provided to `axios` for the request
config: ,
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request:
所以本质上catch(error => )
实际上只是catch(response => )
因此您可以登录error.response.data
,您应该能够看到您的回复消息。
当您登录
console.log(error)
时,您看到的是string
由error
对象上的toString
方法返回。
根据同一文档上的错误处理部分,您可以像这样捕获错误响应
axios.post(helper.getLoginApi(), data)
.then((response) =>
console.log(response);
this.props.history.push(from.pathname)
)
.catch((error)=>
if (error.response)
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
else if (error.request)
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
else
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
)
【讨论】:
以上是关于无法捕获并记录来自 axios 请求的错误响应的主要内容,如果未能解决你的问题,请参考以下文章
如何修复来自 Axios 的随机 http 请求(404 响应)
使用 axios 从 404 响应中捕获错误消息或在 javascript 中获取
如何使用 async/await 编写 .then 函数,以便捕获来自 axios 的响应(在单独的文件和方法中,在 vue 中)