前端如何处理标准Error对象？

Question

我有一个带有许多API请求的前端应用程序，但是使用错误响应很痛苦。

有时我需要遍历许多嵌套对象，例如：error.response.data.email有时是error.response.data.address.province[0]。

我无法预测所有错误，因此编写手动“解析器”对我来说似乎是一个肮脏的额外解决方案：

const errorsObject = err.response.data
    let errors = ''

    Object.keys(errorsObject).map(key => {
      if (key === 'address') {
        Object.keys(errorsObject.address).map(
          key => (errors += `${key} : ${errorsObject.address[key]}\n`)
        )
      } else {
        errors += `${key} : ${errorsObject[key]}\n`
      }
      return undefined
    })

    yield toast.error(errors)

而且它仍然不能涵盖所有内容。

是否有任何前端解析器？如果没有，我们的后端是Python（Django），也许后端有一个软件包？理想情况下，我希望看到一系列平面的对象{title, message}。

Answer 1

您的错误对象格式正确，并且从前端角度来看，解析错误的基本思想是正确的。

我在错误响应中看到的唯一问题是嵌套和水合。

如果您需要水合的响应，则应向解析器提供正确检索数据并最终将其映射到前端UI的功能。

通常，我向表单提供一个对象（通常称为错误），在该对象中可以安全地通过字段名称检索与该字段相关的错误。

恕我直言，您的操作“正确”，请尝试使用对象类型而不是特定于对象的键（例如“地址”）。

这是我经常使用的错误解析器的示例。当发生非常深的嵌套或需要数组解析时，我通常会更新解析器以获取错误并获得从UI检索它的能力，例如，在字段下显示错误，将其用红色边框包围，等等：

import _ from 'lodash';

export const getErrors = (errors) => {
  const validationErrors = _.get(errors, 'data.validation_messages') ? errors.data.validation_messages : {};
  // Iterate over object keys
  _.forOwn(validationErrors, (value, key) => {
    // Simple error: { key: { errorKey: value }} - Nested Error {key: { nestedErrorKey: { errorKey: value }}
    const data = validationErrors[key][Object.keys(validationErrors[key])[0]];
    // Check that content of key is neither null or object (nested validation)
    if (validationErrors[key] !== null && typeof data !== 'object') {
      validationErrors[key] = _.values(value)[0];
    } else if (validationErrors[key] !== null && typeof data === 'object') { // TODO: Recursive approach ?
      // Trasform nested values so obj: { nestedKey: nestedvalue } becomes obj_nestedKey: nestedValue
      _.forOwn(validationErrors[key], (nestedValue, nestedKey) => {
        validationErrors[`${key}_${nestedKey}`] = _.values(nestedValue)[0];
      });
    }
  });
  return validationErrors;
};

export default getErrors;