当前位置: 首页 > 知识库问答 >
问题:

无法捕获并记录axios请求的错误响应

谭琛
2023-03-14

我在我的反应应用程序中有一个axios请求,为此我遵循axios npm文档。

这是我的axios请求

 axios.post(helper.getLoginApi(), data)
        .then((response) => {
            console.log(response);

            this.props.history.push(from.pathname)
        })
        .catch((error)=> {
            console.log(error);
        })

我能够成功记录成功请求的数据。但是,当我故意产生一个错误并尝试将其记录到console.log中时,我不会将结果记录下来,我只是看到了

邮递http://localhost:3000/login 401(未经授权):3000/登录:1
错误:请求失败,状态代码401 login.js:66

在createError(createError.js:16)

在结算(settle.js:18)

在XMLHttpRequest.handleLoad(xhr.js:77)

但是,当我转到Chrome控制台中的网络选项卡时,我可以看到返回了以下响应。

提前谢谢你的帮助。

共有1个答案

马阳晖
2023-03-14

来自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: {}
}

所以本质上捕获(错误=

因此,您可以记录error.response.data,并且应该能够看到您的响应消息。

当您记录console.log(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捕捉错误响应。怎么做?我用的是: 我看到ajax请求的结果有400个状态代码,响应主体看起来像(Django后端)。没关系,我已经准备好在catch处理程序中处理这些错误了。 但是它们转到成功处理程序。为何如此?我在控制台中看到以下输出: 成功处理程序接收axios错误对象作为结果。为什么会这样,下一步该怎么办?此错误对象不包含任何有用信息。 UPD。实际上,错误对象包含有用的信

  • 我正在使用以下代码向Laravel发布一些内容: (不相关代码省略) 当Laravel返回200时,这总体上是有效的。如果我从Laravel Axios返回401、422或其他东西,会在控制台中抛出一个错误,整个方法将停止运行。 我一直认为这是一种非常不利于开发人员的行为——我不明白吗?从后端API返回不同的状态代码应该有助于读取Vue中的响应,但Vue/Axios将每个非200响应视为致命错误。

  • 我正在为一个项目使用Hackerrank API。查看官方文档,点击这里! 在他们的网站上有一个使用UNIREST的例子, 由于我使用的是axios,所以我将其转换为类似的axios代码,如下所示: 我希望这只适用于示例中所示的示例,但它给我带来了以下错误: 请求失败,状态代码为400 错误:请求失败,状态代码为400 在createError(createError.js:16) 在sett(s

  • 我正在从后端代码发送状态代码422,其中包含错误描述的响应正文。我使用axios post发布请求,如下所示: 问题是,当后端返回错误代码422时,我捕获的错误对象没有关于响应体的信息。有什么方法可以检索错误文本吗?

  • 我使用react与redux和axios进行异步操作。以及用于后端的laravel 5.2 api。React在实际域中,api在子域中。当我试图向api调用异步get请求时,我从网络上得到了200 Ok,但在控制台上得到了错误。 控制台日志: 无法加载XMLHttpRequesthttp://api.doublecurlybraces.me/api/test?api_token=inpm38Xb

  • 我有一些REST服务,我想记录请求和响应。它们接收一个JSON请求并生成另一个JSON响应。我创建了一个拦截器,但无法获取请求/响应正文。这是我的cxf配置: 这是我的拦截器代码: ContextMessageInInterceptor和ContextMessageOutInterceptor工作正常,它们分别转到ContextJSONInInterceptor和ContextJSONOutInt