如何使用 Redux/Axios 捕获和处理错误响应 422? [英] How to catch and handle error response 422 with Redux/Axios?

问题描述

我有一个操作向服务器发出 POST 请求以更新用户的密码，但我无法处理链式 catch 块中的错误.

I have an action making a POST request to the server in order to update a user's password, but I'm unable to handle the error in the chained catch block.

return axios({
  method: 'post',
  data: {
    password: currentPassword,
    new_password: newPassword
  },
  url: `path/to/endpoint`
})
.then(response => {
  dispatch(PasswordUpdateSuccess(response))
})
.catch(error => {
  console.log('ERROR', error)
  switch (error.type) {
    case 'password_invalid':
      dispatch(PasswordUpdateFailure('Incorrect current password'))
      break
    case 'invalid_attributes':
      dispatch(PasswordUpdateFailure('Fields must not be blank'))
      break
  }
})

当我记录错误时，这是​​我看到的:

When I log the error this is what I see:

当我检查网络选项卡时，我可以看到响应正文，但由于某种原因我无法访问这些值！

When I check the network tab I can see the response body, but for some reason I can't access the values!

我是不是在不知不觉中犯了一个错误?因为我正在处理来自不同请求的其他错误，但似乎无法解决这个问题.

Have I unknowingly made a mistake somewhere? Because I'm handling other errors from different request fine, but can't seem to work this one out.

推荐答案

Axios 可能正在解析响应.我在我的代码中访问这样的错误:

Axios is probably parsing the response. I access the error like this in my code:

axios({
  method: 'post',
  responseType: 'json',
  url: `${SERVER_URL}/token`,
  data: {
    idToken,
    userEmail
  }
})
 .then(response => {
   dispatch(something(response));
 })
 .catch(error => {
   dispatch({ type: AUTH_FAILED });
   dispatch({ type: ERROR, payload: error.data.error.message });
 });

来自文档:

请求的响应包含以下信息.

The response for a request contains the following information.

{
  // `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
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {}
}

所以 catch(error => ) 实际上只是 catch(response => )

我仍然不明白为什么记录错误会返回该堆栈消息.我试着像这样记录它.然后你就可以真正看到它是一个对象.

I still dont understand why logging the error returns that stack message. I tried logging it like this. And then you can actually see that it is an object.

console.log('errorType', typeof error);
console.log('error', Object.assign({}, error));

编辑 2:

在查看更多这之后您正在尝试打印.这是一个 Javascipt 错误对象.Axios 然后通过配置、代码和响应来增强这个错误，比如 this.

After some more looking around this is what you are trying to print. Which is a Javascipt error object. Axios then enhances this error with the config, code and reponse like this.

console.log('error', error);
console.log('errorType', typeof error);
console.log('error', Object.assign({}, error));
console.log('getOwnPropertyNames', Object.getOwnPropertyNames(error));
console.log('stackProperty', Object.getOwnPropertyDescriptor(error, 'stack'));
console.log('messageProperty', Object.getOwnPropertyDescriptor(error, 'message'));
console.log('stackEnumerable', error.propertyIsEnumerable('stack'));
console.log('messageEnumerable', error.propertyIsEnumerable('message'));

这篇关于如何使用 Redux/Axios 捕获和处理错误响应 422?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！