如何阻止模式直到解决 api 请求答案

【问题标题】：How to block modal until api request is resolved如何阻止模式直到解决 api 请求
【发布时间】：2019-02-01 14:47:06
【问题描述】：

问题

在EditDepartmentsModal::submitChanges() 的底层http 请求得到解决之前，我可以阻止hideModal() 操作、ESC 按键处理程序、覆盖点击处理程序的最佳方法是什么？

更新

我认为我能做的是：

拦截api调用，在另一个vuex模块设置PENDING状态
检查hideModal() 操作中的PENDING 是否为真。

这不会耦合 vuex 模块吗？这是个好主意吗？

详情

我正在使用单独的 vuex 模块进行模态可见性控制（建议 in the article）：

...
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); }, };

问题质量免责声明

如果您需要更多我的组件代码，我会更新问题。也许它现在没有完美地制定，我愿意进行编辑。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案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();
}

【讨论】：