关于 vuejs 示例中的 promise 的解释请求

Question

我有一个小沙箱here，有两个组件。对象列表（例如“组”）和确认模式。单击删除按钮时会触发模式。 （这个沙箱是从another post 中提取的，我在其中询问了将模态结果发送到父组件GroupList 的不同方式。

这是模态组件：

<template>
  <b-modal
    id="modalConfirmation"
    title="Confirmation"
    ok-variant="danger"
    @cancel="resolvePromise(false)"
    @ok="resolvePromise(true)"
    @close="resolvePromise(false)"
  >Are you sure you want to delete this row ?</b-modal>
</template>

<script>
export default {
  name: "ModalConfirmation",
  data() {
    return {
      group: null,
      resolvePromise: null,
      rejectPromise: null
    };
  },
  methods: {
    show(group) {
      return new Promise((resolve, reject) => {
        this.group = group;
        this.$bvModal.show("modalConfirmation");
        this.resolvePromise = resolve;
        this.rejectPromise = reject;
      });
    }
  }
};
</script>

对我来说最好的解决方案是这个。但是，虽然我了解 JavaScript 承诺的原理，但我无法弄清楚它在这种情况下是如何工作的。它运行良好，但我不喜欢使用我不理解的代码。

在ModalConfirmation 中，对于b-modal 标签，这些是设置模态结果的事件。但是 vuejs / bootstrap-vue 是如何做到和 promise 匹配的呢？

@ok="resolvePromise(true)"
@cancel="resolvePromise(false)"
@close="resolvePromise(false)"

因为在显示模式时调用了 promise 构造函数，仅此而已...

此外，如果我对此发表评论

  resolvePromise: null,
  rejectPromise: null

在模态组件中，它仍然有效。有人可以解释一下这种情况下的承诺解决流程吗？

Answer 1

模板中的data 是Vue 组件方法中的this。

会发生什么：

1. 当show 被调用时，传入new Promise 的函数（promise 执行器 函数）与resolve 和reject 特定于该promise 的函数同步调用： 调用时，他们将解决或拒绝承诺。 show 中的 promise 执行器将它们存储在 Vue 组件数据中，分别为 resolvePromise 和 rejectPromise：

   this.resolvePromise = resolve;
   this.rejectPromise = reject;
   

2. show 返回承诺。

3. 组件被渲染，使用这些函数作为点击处理程序：

   @ok="resolvePromise(true)"
   @cancel="resolvePromise(false)"
   @close="resolvePromise(false)"
   

   这些函数在模板中可用，就像 data 对象上的任何其他函数一样。

4. 当您单击其中一个按钮时，它会解析或拒绝通过这些函数返回的承诺 show。

您可以在调试器中看到该流程（推荐），或者通过添加日志语句，例如 (updated sandbox)：

<template>
  <b-modal
    id="modalConfirmation"
    title="Confirmation"
    ok-variant="danger"
    @cancel="resolvePromise(false)"
    @ok="resolvePromise(true)"
    @close="resolvePromise(false)"
  >Are you sure you want to delete this row ?</b-modal>
</template>

<script>
export default {
  name: "ModalConfirmation",
  data() {
    // *** Added log
    console.log("Making data");
    return {
      group: null,
      resolvePromise: null,
      rejectPromise: null
    };
  },
  methods: {
    show(group) {
      // *** Added log
      console.log("`show` called");
      return new Promise((resolve, reject) => {
        this.group = group;
        this.$bvModal.show("modalConfirmation");
        // *** Wrapped call to `resolve` with a function doing a log statement
        this.resolvePromise = flag => {
          console.log(`Calling resolve(${flag})`);
          resolve(flag);
        };
        // *** Wrapped call to `reject` with a function doing a log statement
        this.rejectPromise = error => {
          console.log(`Calling reject(${error})`);
          reject(error);
        };
      });
    }
  }
};
</script>

---

你能够注释掉data这部分的原因

resolvePromise: null,
rejectPromise: null

在不改变任何东西的情况下，它们在那里并不是真正需要的。在开始时指定它们可以防止数据对象的 shape（它具有的属性和原型）在以后调用 show 时发生变化，这有助于 JavaScript 引擎优化。但正如您注意到将它们注释掉一样，您没有必须这样做。