Как лучше обработать асинхронность?

Question

[Дима Паутов]

Есть у меня в компоненте vue форма. Задумался, как лучше её обработать при отправке.

1й вариант, через async/await

async onSubmitAuth () {
  const isValid = await this.$refs.formAuth.validate()

  if (!isValid) {
    return
  }

  try {
    this.setLoading(true)
    await this.signIn(this.form.auth.model)
    this.setLoading(false)
  } catch (error) {
    this.showErrors(error)
    this.setLoading(false)
  }
},

2й вариант, через промисы и колбеки

onSubmitAuth () {
  this.$refs.formAuth.validate(isValid => {
    if (isValid) {
      this.setLoading(true)

      this.signIn(this.form.auth.model)
        .then(_ => {
          this.setLoading(false)
        })
        .catch(error => {
          this.showErrors(error)
          this.setLoading(false)
        })
    }
})

Оба варианта полностью рабочие, но, я всегда писал по 2му примеру, а тут решил попробовать написать через async/await и у меня встал вопрос, какой же вариант лучше.

В 1м варианте я могу юзать await, код получился более линейным и непонятным что ли для меня, хз. Но, тут onSubmitAuth сразу говорит, что функция делает что-то асинхронное, грубо говоря уже в самом начале себя документирует.
Во 2м варианте, более понятный для меня код, но тут нет await и как бы сам onSubmitAuth не говорит с 1го раза, что он делает что-то асинхронное.

Какой вариант более предпочтителен? Может я просто придираюсь сам к себе, не знаю))

P.S. this.$refs.formAuth.validate() - возвращает промис, юзаю element-ui, валидацией под его капотом занимается библиотека async-validator, что бы лишних вопросов не возникало

Comments

[Сергей delphinpro]

Конечно первый вариант, чего тут рассуждать...