Запрос объяснения об обещании в vuejs образце - PullRequest
Новая
       46

Запрос объяснения об обещании в vuejs образце

0 голосов
/ 09 марта 2020

У меня есть маленькая песочница здесь с двумя компонентами. Список объектов (например, «Группы») и модальное подтверждение. Модальный режим запускается при нажатии кнопки удаления. (Эта песочница извлечена из другого поста , в котором я попросил разные способы отправить результат модального в родительский компонент, 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 сделать соответствие между этим и обещанием? 

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

Поскольку конструктор обещания вызывается, когда показывается модал, и это все ...

Более того, если я прокомментирую это 

  resolvePromise: null,
  rejectPromise: null

в модальном компоненте, он все еще работает. Может ли кто-нибудь объяснить мне последовательность выполнения обещаний в этом случае?

1 Ответ

3 голосов
/ 09 марта 2020

data из шаблона this в Vue методах компонентов.

Вот что происходит:

  1. Когда вызывается show, функция, переданная в new Promise (функция исполнитель обещания ), вызывается синхронно с функциями resolve и reject, указывающими c на это обещание: при вызове они разрешают или отклоняют обещание , Исполнитель обещания в show сохраняет их в данных компонента Vue как resolvePromise и rejectPromise: 

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

  2. show возвращает обещание.

  3. Компонент отображается с использованием этих функций в качестве обработчиков щелчков: 

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

    Эти функции доступны в шаблоне, как и все остальное в объекте data.

  4. Когда вы нажимаете одну из кнопок, она либо разрешает, либо отклоняет обещание show, возвращаемое через эти функции.

Этот поток можно увидеть в отладчике (рекомендуется ), или путем добавления операторов регистрации, например ( обновленная песочница ): 

<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

, ничего не меняя в том, что они там на самом деле не нужны. Задание их в самом начале предотвращает изменение формы объекта (свойства и прототип) объекта данных позднее при вызове show, что помогает оптимизировать механизмы JavaScript. Но, как вы заметили, комментируя их, у вас нет , чтобы сделать это.

...