如何正确处理axios错误以及如何获取详细的错误描述?

时间:2019-10-15 02:27:24

标签: javascript reactjs axios

我对axios和错误处理有疑问。所以这是当用户从前端登录时我用来处理错误的方法:

    axios.post('http://localhost:3001/login',
        {
            login: user.login,
            password: user.password,
        }
    )
    .then(
        (response) => {
            // code
        },
        (error) => {
            // error handling
        }
    );

这是第二种方法:

    axios.post('http://localhost:3001/login',
        {
            login: user.login,
            password: user.password,
        }
    )
    .then(
        (response) => {
            // code
        }
    ).catch((error) => {
        // error handling
    });

什么是最好的方法?一样吗当服务器不可访问时,错误消息是相同的:“网络错误”。有什么办法可以得到更详细的错误? (例如,在控制台中,我收到CORS错误)

2 个答案:

答案 0 :(得分:1)

该错误可能发生在不同的部分-请求,响应。

没有响应时发生请求错误。像404等一样,没有默认响应。

当API发送自定义响应以处理错误时,就会出现响应错误。

我以前是这样处理的:

const handleErrorResponse = (error) => {
  let errorResponse;
  if(error.response && error.response.data) {
    // I expect the API to handle error responses in valid format
    errorResponse = error.response.data;
    // JSON stringify if you need the json and use it later
  } else if(error.request) {
    // TO Handle the default error response for Network failure or 404 etc.,
    errorResponse = error.request.message || error.request.statusText;
  } else {
    errorResponse = error.message;
  }
  throw new Error(errorResponse);
}

现在

axios.get(/foo/bar)
.then(res => doSOmething())
.catch(err => handleErrorResponse(err))

我使用错误处理错误响应作为字符串。 您可以根据需要将其与axios拦截器一起使用。

答案 1 :(得分:-1)

这无效,then接受单个参数

.then(
        (response) => {
            // code
        },
        (error) => {
            // error handling
        }
    );

仅这有效

.then(
        (response) => {
            // code
        }
    ).catch((error) => {
        // error handling
    });