Как заблокировать модальный режим, пока не будет решен запрос API

Question

Вопрос

Как лучше всего заблокировать действие hideModal(), обработчик нажатия клавиши ESC, обработчик нажатия наложения до тех пор, пока не будет разрешен базовый http-запрос EditDepartmentsModal::submitChanges()?

Обновление

Я думаю, что могу сделать следующее:

• перехватывать вызовы API, устанавливать состояние PENDING в другом модуле vuex
• проверить, является ли PENDING истинным в действии hideModal().

Разве это не соединит модули vuex?Это хорошая идея?

---

Подробности

Я использую отдельный модуль vuex для модального контроля видимости (как предложено в статье ):

...
state: { modalVisible: false, },
mutations: {
  SET_MODAL_VISIBLE(state) { state.modalVisible = true; },
  SET_MODAL_INVISIBLE(state) { state.modalVisible = false; },
},
actions: {
  showModal(context) { context.commit('SET_MODAL_VISIBLE'); },
  hideModal(context) { context.commit('SET_MODAL_INVISIBLE'); },
}
...

Modal.vue (отрывок):

<template>
  <div class="ui-modal">
    <div v-if="visible" @click="closeOnOverlayClicked && hideModal()">
      <div :class="cssContainerClasses" @click.stop>
        <slot></slot>
      </div>
    </div>
  </div>
</template>
...
mounted() {
  if(this.closeOnEscPressed) this.handleEscPressed();
},
computed: {
  ...mapState('modal', { visible: state => state.modalVisible, }),
},
methods: {
  // handles ESC keydown, overlay click
  ...mapActions('modal', ['hideModal',]), 
  // other methods ...
}
...

Родитель EditDepartmentsModal.vue компонент встраивает Modal.vue и позволяет использовать его методы submitChanges(), cancel():

<template>
  <modal>
    <form>
      <!-- ... -->
      <div class="modal-actions">
        <button @click="submitChanges()">Submit</button>
        <button @click="cancel()">Cancel</button>
      </div>
    </form>
  </modal>      
</template>

<script>
  ...  
  methods: {
    submitChanges() {
      // DepartmentsHttpService was imported before
      let rq = DepartmentsHttpService.saveChanges();
      rq.then(r => { this.hideModal(); });
      rq.catch(e => { /* show errors, log */ this.hideModal(); });
    },
    cancel() {
      // vuex mapped action
      this.hideModal();
    }
  }
  ...

</script>

Для вызовов API я решил использовать ( article ) сервисные объекты, обертывающие axios запросы:

// DepartmentsHttpService.js
import {HTTP} from '../http';    
export default { saveChanges(params) { return HTTP.post('departments', params); }, };

---

Отказ от ответственности за качество вопроса

Если вам нужно больше моих компонентов, код Iобновлю вопрос.Может быть, это не совсем правильно сформулировано, я открыт для внесения изменений.

Answer 1

Если я правильно понимаю вопрос, кажется, его легко решить с помощью Promises

async submitChanges() {
  try {
    // Store the Promise so that we can wait for it from any point in our component
    this.saveChangesPromise = DepartmentsHttpService.saveChanges();
    await this.saveChangesPromise;
    this.hideModal();
  } catch(e) {
    /* show errors, log */ this.hideModal();
  }
},

async handleEscapePressed() {
  // If somebody has decided to save, wait for the save action to be finished before we close
  if (this.saveChangesPromise){
    await this.saveChangesPromise;
  }
  this.hideModal();
}