React.js中如何根据错误消息细分处理API返回的400状态码错误

这个细分处理逻辑完全可以实现，操作步骤如下：

• 第一步：确认错误对象字段
  先在catch块中打印完整error对象，确认后端返回的400错误中具体错误信息对应的字段名：

  .catch((error) => {
    console.log('完整错误对象：', error) // 打开浏览器控制台查看结构
    // 常见错误信息字段名：message/msg/errorMsg，以实际打印结果为准
  })
  

• 第二步：修正现有语法错误
  你提供的示例代码中setState的闭合括号位置错误，需要将this.setState({result: '400')};修正为this.setState({result: '400'});
• 第三步：实现细分分支处理
  假设打印后确认错误信息字段为message，替换你代码中的ERRORMESSAGEHERE即可，完整代码如下：

  OnSend = () => {
      MyService.SendPost(this.state.enteredValue)
          .then(() => {
              this.setState({result: 'success'});
          })
          .catch((error) => {
              switch(error.errorCode) {
                  case 400:
                      switch(error.message) {
                          case 'error message 1':
                              this.setState({result: '400 with error message 1'});
                              break;
                          case 'error message 2':
                              this.setState({result: '400 with error message 2'});
                              break;
                          default:
                              this.setState({result: '400 通用错误提示'});
                              break;
                      }
                      break;
                  case 500:
                      this.setState({result: '500'});
                      break;
                  default:
                      this.setState({result: '其他错误'});
                      break;
              }
          });
  };
  

• 可选优化：替换嵌套switch为对象映射
  如果后续400细分错误类型较多，嵌套switch可读性较差，可改用对象映射的方式维护：

  // 可单独抽离为配置文件，后续新增错误直接加键值对即可
  const BAD_REQUEST_MSG_MAP = {
    'error message 1': '400 with error message 1',
    'error message 2': '400 with error message 2',
  }
  
  OnSend = () => {
    MyService.SendPost(this.state.enteredValue)
      .then(() => {
          this.setState({result: 'success'});
      })
      .catch((error) => {
          switch(error.errorCode) {
              case 400:
                  const tip = BAD_REQUEST_MSG_MAP[error.message] || '400 通用错误提示'
                  this.setState({result: tip});
                  break;
              case 500:
                  this.setState({result: '500'});
                  break;
              default:
                  this.setState({result: '其他错误'});
                  break;
          }
      });
  };
  

内容的提问来源于stack exchange，提问作者Christos Stefanopoulos