Vue 中的链式 Promise 未按预期工作

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 以及我如何调用这些方法，但我们将不胜感激。

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 指的是返回 Promise 的函数。但是您没有将函数作为参数传递给then（这是正常应该做的，就像你在SO上的现场sn-p中一样） - 你是在打电话 函数，然后将其结果传递给.then。

改成

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

它应该按预期工作。

你在代码沙箱上的代码，在这里被翻译成一个实时的 sn-p，看起来像

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）