Блог

В моем приложении много форм с повторяющимися действиями…

 <form @submit.prevent="save" novalidate 
   ...
  

И метод сохранения ..

 save () {
   ...
   return this.saveEvent(payload)
      .then(() => { self.resetForm() })
      .catch(resp => { 
         if (resp.status === 400) {   
           // verry repetitive task!!
         }
      })
  

Обратите внимание на .catch(resp => { ... })

Во всех формах в моем приложении мне нужно поместить этот улов для обработки полей формы и ответа сервера.

Итак, мой вопрос в том, как обрабатывать повторяющиеся задачи catch в Vue.js ? Как создать директиву или компонент, и все мои формы будут использовать компонент, который будет обрабатывать поля ответа сервера и формы только в одном месте.

Пробовал

Я создаю директиву с именем v-catch-errors

 <form @submit.prevent="save" novalidate v-catch-errors
   ...
  

Но как обрабатывать действия ajax в этой директиве?

.then() и .catch() — это обе функции, поэтому я бы просто создал новый метод с вашим повторяющимся кодом. Что-то вроде:

 methods: {
  save () {
    var self = this
    return this.saveEvent(payload)
      .then(() => { self.resetForm() })
      .catch(resp => { 
        if (resp.status === 400) {
          self.repetitiveTask()
        }
      })
  },
  repetitiveTask () {
    // verry repetitive task!!
  }
}
  

Я сделал var self = this так, чтобы вы могли вызывать repetitiveTask() метод в другой области.