Как отрефакторить работу с ошибками?

Question

[Dos]

Привет! Есть повторяющийся код из вида в вид.

export default {
    data() {
      return {
        form: {
          name: null,
          dateFrom: null,
        },
        error: null,
        errors: []
      }
    },
    methods: {
      create() {
        this.error = null;
        this.errors = [];
        axios
          .post('/events/create', this.form)
          .then(() => {
            this.$router.push({name: 'events'});
          })
          .catch(error => {
            if (error.response) {
              if (error.response.data.error) {
                this.error = error.response.data.error;
              } else if (error.response.data.errors) {
                this.errors = error.response.data.errors;
              }
            } else {
             /* console.log(error.message);*/
            }
          });
      }
    }
  }

Суть в том, что после axios запроса на api получаются ошибки валидация или одна ошибка из Exeption на php.

Если сервер возвращает ошибку, то обрабатываем её

.catch(error => {
            if (error.response) {
              if (error.response.data.error) { //если ошибка от Exeption
                this.error = error.response.data.error;
              } else if (error.response.data.errors) { // Если ошибки валидации формы
                this.errors = error.response.data.errors;
              }
            } else {
             /* console.log(error.message);*/
            }
          });

Кроме того мы вынуждены записывать эти данные в двух местах:

create() {
        this.error = null;
        this.errors = [];
...}

data() {
      return {
       .....
        error: null,
        errors: []
      }
    },

1. Как это можно сократить?
2. Как это можно вынести из всех views куда-то в отдельное место, где vue будет обрабатывать ошибки валидации и exeption?

Comments

[Игорь]

Как вариант, axios оформить как плагин.

Посмотрите как я это делаю.
Из проекта над которым я сейчас работаю.

/plugins/axios.js

import {ACCESS_TOKEN} from "../store/mutation-types";


const DO_NOT_SET_TOKEN_FOR = [
  /\/security\.checkAccessToken/,
  /\/security\.getAccessToken/,
]

export default function ({ $axios, redirect, store }) {
  
  $axios.onRequest(config => {
    
    let not_set_token = false
    if (store.getters[ACCESS_TOKEN]) {
      for (let index in DO_NOT_SET_TOKEN_FOR) {
        if (DO_NOT_SET_TOKEN_FOR[index].test(config.url)) {
          not_set_token = true
          break
        }
      }
    }
    
    if (not_set_token === false) {
      console.log(config.headers.common.Authorization = `Bearer ${store.getters[ACCESS_TOKEN]}`)
    }
    
  })
  
  $axios.onResponse(({data}) => {
    if (data.code === 5) {
      redirect("/login")
    }
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
  })
}

plugins: [
    '~plugins/axios',
    ...
  ]

Для чего мне это нужно?

Мне нужно глобально, на лету устанавливать заголовки и желательно в одном месте.
Мне нужно контролировать, что сервер мне возвращает, не зависимо от того на какой странице я выполняю запрос.

Так же, для каких то общих задач, вы можете вынести ваш код в "миксины", это крайне удобно, плюсы очевидны.

[Dos]

Игорь, не плохое решение) Попробую чуть позже на рабочем проекте)) А то я хотел в каждый вид это добавлять)

Мне нужно глобально, на лету устанавливать заголовки и желательно в одном месте.
Мне нужно контролировать, что сервер мне возвращает, не зависимо от того на какой странице я выполняю запрос.

Вот как раз этим же занимаюсь. Авторизацией)

А как вы рефакторите формы? Создаете свой компонент форм?

[Игорь]

pro-dev,

А как вы рефакторите формы? Создаете свой компонент форм?

Не совсем понял вопрос.

[Dos]

Игорь, я сейчас использую формы так:

<b-form @submit.prevent="create">

            <b-form-group label="Название" label-for="createName">
              <b-form-input
                  id="createName"
                  type="text"
                  v-model="form.name"
                  aria-describedby="createNameError"
                  :state="errors.name ? false : null"
                  required>
              </b-form-input>
              <b-form-invalid-feedback id="createNameError">{{ errors.name }}</b-form-invalid-feedback>
            </b-form-group>

            <b-form-group label="Дата начала" label-for="createStartDate">
              <b-form-input
                  id="createStartDate"
                  type="date"
                  v-model="form.startDate"
                  aria-describedby="createStartDateError"
                  :state="errors.startDate ? false : null"
                  required>
              </b-form-input>
              <b-form-invalid-feedback id="createStartDateError">{{ errors.startDate  }}</b-form-invalid-feedback>
            </b-form-group>

            <b-form-group label="Дата окончаиня" label-for="createEndDate">
              <b-form-input
                  id="createEndDate"
                  type="date"
                  v-model="form.endDate"
                  aria-describedby="createEndDateError"
                  :state="errors.endDate ? false : null"
                  required>
              </b-form-input>
              <b-form-invalid-feedback id="createEndDateError">{{ errors.endDate  }}</b-form-invalid-feedback>
            </b-form-group>

            <b-button type="submit" variant="primary">Добавить</b-button>

          </b-form>

Мне кажется, что это слишком избыточно и можно создать какой-то компонент форм и его использовать. Или это нормальная практика?

[Игорь]

pro-dev, Вы уже используете компоненты ))
Но, да вы правы, можно сделать компонент обёртку, для того что бы уменьшить количество тегов в разметке.

Я вам сейчас приведу пример реализации компонента.

Компонент fg-input

<template>
  <div class="form-group"
       :class="[
       {'input-group': hasIcon},
       {'has-danger': error},
       {'input-group-focus': focused},
       {'has-label': label || $slots.label}]">
    <slot name="label">
      <label v-if="label" :class="labelClasses">
        {{label}}
        <span v-if="required">*</span>
      </label>
    </slot>

    <slot name="addonLeft">
      <div v-if="addonLeftIcon" class="input-group-prepend">
        <i class="input-group-text" :class="addonLeftIcon"></i>
      </div>
    </slot>
    <slot>
      <input
        :value="value"
        v-on="listeners"
        v-bind="$attrs"
        class="form-control"
        :class="[{valid: value && !error}, inputClasses]"
        aria-describedby="addon-right addon-left"
        :type="type"
        :autocomplete="autocomplete ? 'on':'off'"
      >
    </slot>
    <slot name="addonRight">
        <span v-if="addonRightIcon" class="input-group-addon input-group-append">
          <i class="input-group-text" :class="addonRightIcon"></i>
        </span>
    </slot>

    <slot name="infoBlock"></slot>
    <slot name="helpBlock">
      <div class="text-danger invalid-feedback" style="display: block;" :class="{'mt-2': hasIcon}" v-if="error">
        {{ error }}
      </div>
    </slot>
  </div>
</template>
<script>
  export default {
    inheritAttrs: false,
    name: 'fg-input',
    props: {
      autocomplete: {
        type: [Boolean],
        default: false
      },
      required: Boolean,
      label: String,
      error: String,
      labelClasses: String,
      inputClasses: String,
      value: {
        type: [String, Number],
        default: ''
      },
      addonRightIcon: String,
      addonLeftIcon: String,
      type: {
        type: [String],
        default: 'text'
      },
    },
    data() {
      return {
        focused: false
      }
    },
    computed: {
      listeners() {
        return {
          ...this.$listeners,
          input: this.updateValue,
          focus: this.onFocus,
          blur: this.onBlur
        }
      },
      hasIcon() {
        const {addonRight, addonLeft} = this.$slots;
        return addonRight !== undefined || addonLeft !== undefined || this.addonRightIcon !== undefined || this.addonLeftIcon !== undefined
      }
    },
    methods: {
      updateValue(evt) {
        let value = evt.target.value;
        this.$emit('input', value);
      },
      onFocus(value){
        this.focused = true;
        this.$emit('focus', value);
      },
      onBlur(value){
        this.focused = false;
        this.$emit('blur', value);
      }
    }
  }
</script>
<style>

</style>

То как я использую это.

<!-- NAME -->
            <fg-input
              class="no-border input-lg"
              addon-left-icon="now-ui-icons mdi mdi-textbox"
              placeholder="Your name"
              v-model="name"
              type="text"
            >
            </fg-input>

            <!-- EMAIL -->
            <fg-input
              class="no-border input-lg"
              addon-left-icon="now-ui-icons mdi mdi-at"
              placeholder="Email"
              v-model="email"
            >
            </fg-input>

            <!-- PASSWORD -->
            <fg-input
              class="no-border input-lg"
              addon-left-icon="now-ui-icons mdi mdi-textbox-password"
              placeholder="Password"
              type="password"
              v-model="password"
            >
            </fg-input>

            <!-- REPEAT PASSWORD -->
            <fg-input
              class="no-border input-lg"
              addon-left-icon="now-ui-icons mdi mdi-textbox-password"
              placeholder="Repeat password"
              type="password"
              v-model="confirm_password"
            >
            </fg-input>

Но сами формы как таковые я не использую.
Я отправляю чистый JSON.

Например вот так

/**
       * Add new nodes
       * @param node
       */
      async addNodes(node) {
        this.showProgressDialog("Подождите...")
        this.new_node_dialog_visible = false
        let items = this.new_node_dialog_textarea.split("\n")
        let new_node = {
          owner_id: node.id,
          items
        }
        await this.$axios.$post(`${process.env.api}/categories.add`, new_node)
            .then(({code, msg}) => {
               // что-то сообщаем пользователю о завершении операции
            })
        this.hideProgressDialog()
      }

[Dos]

Игорь, не плохое решение. А почему в ответы не пишите?)))

[Игорь]

pro-dev, Я не считаю это решением, как таковым исходя из вашего вопроса.

Ответ может быть следующим:

Сори, сайт на русском не открылся, гребаный роскомпозор

Mixins - Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Вам очень помогут миксины, код станет чище и легче будет поддерживать.

Создавайте свои компоненты обёртки, но не просто завернуть ради того что бы создать компонент.
Для того что бы из группы компонентов создать один компонент, для многоразового использования.

[Dos]

Игорь, благодарю вас за помощь) На php освоил чистый код, а вот Vue только начинаю. Ещё мало опыта и есть много вопросов) Так как привык на php следовать SOLID, то и тут это хочется использовать. Но пока не очень есть понимание как это все разносить. Компоненты более понятно было, а вот с обработкой ошибок затормозил. Но помогли) Попробую))

А по ответу зря) Мне помог ваш комментарий с пониманием. Про примеси тоже почитаю. Я так понимаю примеси это как трейт на php)

[Игорь]

pro-dev,

Я так понимаю примеси это как трейт на php)

Не совсем, хотя могу ошибаться, коллеги поправят.

Примеси это часть возможности фреймворка vue, а Trate в php возможность языка.
Но идя одна, возможность повторного использования кода.

Если сравнивать некоторые важные параметры, то

Примеси в VUE имеют контекст страницы в которой вы его подключили.
В php такая же история, если вы подключили трейт, то в Trate вы получите $this базового класса.

[Игорь]

А ещё есть возможность общаться с компонентами с помощью сообщений, наверняка вам это известно.

Из реальной жизни.

Мне нужен диалог, ну что-то типа
Вы хотите удалить эту запись, да, нет?
Или отобразить прогресс диалог

Если речь идёт о собственном компоненте.
1. Создать компонент
2. Подкачать там где это нужно.

Тут я призадумался, зачем мне каждый раз подключать компонент, если я могу его подключить всего один в layout.vue или App.vue.

Как общаться я буду с компонентом?

Код компонента

<template>
  <div class="text-center">
    <v-dialog
      v-model="progress_dialog_visible"
      hide-overlay
      persistent
      width="300"
    >
      <v-card
        color="#c04a3c"
        dark
      >
        <v-card-text>
          {{message}}
          <v-progress-linear
            :indeterminate="progress === -1"
            color="white"
            class="mb-0"
            :value="progress"
          ></v-progress-linear>
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  export default {

    model: {
      prop: 'visible',
      event: 'change'
    },

    data() {
      return {
        message: "Подождите...",
        progress: -1,
        progress_dialog_message: "",
        progress_dialog_visible: false,
      }
    },

    mounted() {
      this.$root.$on("progress-dialog-show", (message = "Подождите...") => {
        this.message = message
        this.progress_dialog_visible = true
      })

      this.$root.$on("progress-dialog-hide", () => {
        this.progress_dialog_visible = false
      })

      this.$root.$on("progress-dialog-set-progress", ({message, progress}) => {
        this.message = message || ""
        this.progress = progress || 0
      })
    },


  };
</script>

<v-app>
    ...
    <progress-dialog />
  </v-app>
</template>

<script>

  import ProgressDialog     from "../components/ProgressDialog/ProgressDialog";

  ...
</script>

Для того что бы показать диалог, я выполняю следующее...

this.$root.$emit("progress-dialog-show", "Подождите...")

Итог:

Подключение всего в одном месте.
Всегда можно вызвать диалог из любой страницы.
Меньше кода.

[Dos]

Игорь, вот это как раз кстати)) Тоже о диалогах думал как выводить их при ошибках)) Пригодится. Но пока вообще сложновато это всё осмысливать) Вроде бы просто, но мозг ломается с непривычки)

[Dos]

Игорь,

this.$root.$emit("progress-dialog-show", "Подождите...")

А как можно понять что тут вызывается?
Откуда берется $root и $emit?

[Игорь]

pro-dev,

vm-root
vm-emit

[Dos]

Игорь, теперь понял) Спасибо)