Javascript 如何重构catch方法

我有一个错误处理的代码，我在一些组件中使用它，我认为更好的方法是编写一个可以在许多地方使用的函数，而不是到处复制相同的代码。下面是我的例子：

this.fetchDataFromAPI(this.filters)
      .then(() => {})
      .catch(error => {
        if ((!error.body.invalidFields || !Object.keys(error.body.invalidFields).length) && error.body.errorMessage) {
          this.$message({
            message: error.body.errorMessage,
            type: MESSAGES_TYPES.error
          })
        }
        if (error.body.invalidFields && Object.keys(error.body.invalidFields).length) {
          const errors = error.body.invalidFields
          Object.keys(errors).forEach(error => {
            this.errors.push(
              {
                message: errors[error],
                path: [error]
              }
            )
          })
          ValidatorClass.validFormIfBackendErrors(this.errors, this.$refs[this.formName])
        }
      })

---

如何重构它？

您可以将错误处理程序定义为可重用的命名函数

const errorHandler = error => {
  if ((!error.body.invalidFields || !Object.keys(error.body.invalidFields).length) && error.body.errorMessage) {
    this.$message({
      message: error.body.errorMessage,
      type: MESSAGES_TYPES.error
    })
  }
  if (error.body.invalidFields && Object.keys(error.body.invalidFields).length) {
    const errors = error.body.invalidFields
    Object.keys(errors).forEach(error => {
      this.errors.push(
        {
          message: errors[error],
          path: [error]
        }
      )
    })
    ValidatorClass.validFormIfBackendErrors(this.errors, this.$refs[this.formName])
  }
}

this.fetchDataFromAPI(this.filters)
  .then(() => {})
  .catch(errorHandler)

---

您可以创建一个包含errorHandler的helper js文件，并将其导入其他Vue文件中。您认为如何使用静态方法而不仅仅是函数创建一个类？我应该让它保持原样，还是使用静态方法的类也是一个好的解决方案？