无法捕获和记录来自axios请求的错误响应 [英] Unable to catch and log the Error response from an axios request

问题描述

我的react应用程序中有一个axios请求，为此我正在关注 axios npm文档.

I am having a axios request in my react application, for which I am following the axios npm docs.

这是我的axios请求

This is my axios request

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

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

我能够在成功的请求中成功记录数据.但是，当我故意产生错误并尝试进行console.log记录时，却没有记录结果，我只是看到

I am able to successfully log the data on a successful request. However When I intentionally produce an error and try to console.log it, I don't get the result logged instead, I just see

POST http://localhost:3000/login 401(未经授权) :3000/login:1
错误:请求失败，状态码为401 login.js:66

POST http://localhost:3000/login 401 (Unauthorized) :3000/login:1
Error: Request failed with status code 401 login.js:66

在createError(createError.js:16)

at createError (createError.js:16)

定居(settle.js:18)

at settle (settle.js:18)

在XMLHttpRequest.handleLoad(xhr.js:77)

at XMLHttpRequest.handleLoad (xhr.js:77)

但是，当我在Chrome控制台中转到网络"标签时，可以看到以下响应.

However when I go to Network Tab in Chrome Console, I can see the below response returned.

谢谢您的帮助.

推荐答案

来自 Github文档 . axios请求的响应看起来像

From the Github Docs. The response of an axios request looks like

{
  // `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 => )

So essentially catch(error => ) is actually just catch(response => )

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

and so you can log error.response.data and you should be able to see your response message.

登录console.log(error)时，看到的是string 由error对象上的toString方法返回.

When you log console.log(error), what you see is the string returned by the toString method on the error object.

根据同一文档的错误处理部分，您可以捕获错误响应，如

According to the error handling section on the same docs, you can have the catch the error response like

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请求的错误响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！