Цепные обещания в Vue не работают должным образом

Question

Я уверен, что что-то упустил, но, как я не могу понять, подумал, что я могу проверить здесь

Короче говоря, я хочу сделать это в Vue (https://codesandbox.io/s/6zlmkm61m3)

function p1() {
  return new Promise((resolve, reject) => {
    console.log('p1')
    resolve()
  })
}

function p2() {
  return new Promise((resolve, reject) => {
    console.log('p2')
    reject('p2')
  })
}

p1()
  .then(p2)
  .catch((error) => {

    console.log(error)
  })

Однако, если я извлечу это в Vue, это даст мне Uncaught (in promise)

https://codesandbox.io/s/mq2343y6p8

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

Код Vue:

export default {
  name: "App",
  components: {
    Hello,
    World
  },
  data() {
    return {};
  },
  methods: {
    checkPromise() {
      this.$refs.promiseOne
        .p1()
        .then(this.$refs.promiseTwo.p2())
        .catch(error => {
          console.log(error);
        });
    }
  }
};

Answer 1

Проблемная строка:

.then(this.$refs.promiseTwo.p2())

где this.$refs.promiseTwo.p2 относится к функции, которая возвращает Обещание. Но вы не передаете функцию в качестве параметра then (что и должно быть сделано обычно, как в вашем живом фрагменте здесь на SO) - вы вызываете функция, а затем передать свой результат в .then.

Изменить на

.then(this.$refs.promiseTwo.p2)

и все должно работать как положено.

Ваш код на codeandbox, переведенный здесь в живой фрагмент, выглядит как

function p1() {
  return new Promise((resolve, reject) => {
    console.log('p1')
    resolve()
  })
}

function p2() {
  return new Promise((resolve, reject) => {
    console.log('p2')
    reject('p2')
  })
}

p1()
  .then(p2()) // <------- problem: p2 is invoked, not passed
  .catch((error) => {

    console.log(error)
  })

(откройте консоль актуального браузера на этой странице, чтобы увидеть Uncaught (in promise) p2)