Question

我使用React作为我的rails项目的前端库，我遇到了一个向用户显示错误的问题，我使用Ajax发送请求但是如果服务器端在每个React.Component内的每个请求中返回错误，我发现我的自我重复错误回调函数：

$.ajax({
    url: URL,
    type: METHOD,
    data: { 
       //data 
    },
    success: function () {
      //calling some function
    }.bind(this),
    error(error) {

      // begin
      server_errors = JSON.parse(error.responseText);
      array_of_keys_of_errors = Object.keys(server_errors);
      for( i = 0 ; i < array_of_keys_of_errors.length; i++){
        nested_keys = Object.keys(server_errors[array_of_keys_of_errors[i]]);
        for( j = 0 ; j < nested_keys.length; j++){
          array_of_errors = server_errors[array_of_keys_of_errors[i]][nested_keys[j]];
          for( k = 0 ; k < array_of_errors.length; k++){
            bootbox.alert({
              message: nested_keys[j] + ' ' + array_of_errors[k],
              closeButton: false,
            });
          }
        }
      }
      // end
    },
  });

是否有一种有效的方法可以使我的代码远离冗余，我正在考虑共享文件包含共享函数并将其包含在每个React.Component中，但我没有找到与此类似的东西。

Answer 1

您可以创建一个处理错误的函数：

function handleErrors(errors) {
  const server_errors = JSON.parse(error.responseText);
  const array_of_keys_of_errors = Object.keys(server_errors);
  for( i = 0 ; i < array_of_keys_of_errors.length; i++){
    nested_keys = Object.keys(server_errors[array_of_keys_of_errors[i]]);
    for( j = 0 ; j < nested_keys.length; j++){
      array_of_errors = server_errors[array_of_keys_of_errors[i]][nested_keys[j]];
      for( k = 0 ; k < array_of_errors.length; k++){
        bootbox.alert({
          message: nested_keys[j] + ' ' + array_of_errors[k],
          closeButton: false,
        });
      }
    }
  }
}

并在您的文件中共享该功能。

您可以这样使用它：

$.ajax({
  url: URL,
  type: METHOD,
  data: { 
     //data 
  },
  success: function () {
    //calling some function
  }.bind(this),
  handleErrors
})

从React项目中删除重复项

1 个答案: