vue学习日记--Promise（2）

最新推荐文章于 2025-09-10 00:13:41 发布

原创最新推荐文章于 2025-09-10 00:13:41 发布 · 253 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

安卓开发专栏收录该内容

3 篇文章

订阅专栏

本文通过一系列代码示例深入探讨了Promise链的工作原理，展示了return 3如何等价于Promise.resolve(3)，以及return new Promise()的重要性。文章详细解释了Promise状态的不可逆性，如何通过resolve和reject控制链式执行，并讨论了catch如何捕获异常并恢复执行流程。这是一篇关于Promise学习的实战笔记。

最近学习做工作中，用到Promise，所以下面我详细研究下Promise链。
Promise链如何工作？直接上代码

test () {
        this.test1().then((res) => {
        console.log('res', res)
        this.test2()
      }).then((ress) => {
        console.log('ress', ress)
      }).catch((rej) => {
        console.log('rej', rej)
      })
    },
test1 () {
  let val = 1
      return new Promise((resolve, reject) => {
        if (val === 1) {
          return resolve(1)
        }
      })
    },
    test2 () {
      let val = 2
      // console.log('val', 2)
      return new Promise((resolve, reject) => {
        if (val === 2) {
          // console.log('val', 2)
          resolve(2)
        }
      })
    }

上面这个代码执行的结果：
在这里插入图片描述
看到结果，我开始就想为啥会打印出来3呢？return 3 并没有改变promise链的状态。查了资料才知道，这个等价为 Promise.resolve(3).

变化：

test1 () {
      let val = 3

对了test1方法做了如上变化，执行结果：
在这里插入图片描述
可看出没有任何结果输出，程序出现了假死。这是因为，到val =3时，test1（）不会有任何能过改变Promise链状态的值返回。这也是Promise的本质—承诺。
再变法：

test1 () {
      let val = 3
      return new Promise((resolve, reject) => {
        if (val === 1) {
          return resolve(1)
        }
        return 3
      })
    }

结果和上个截图一样
再变

test1 () {
      let val = 3
      return new Promise((resolve, reject) => {
        if (val === 1) {
          return resolve(1)
        }
        return resolve(3)
      })
    },

结果：
在这里插入图片描述
几下对比可以看出，如果是return new Promise()方法，内部必须有能改变Promise链状态的方法能是的其正常执行下去。
再变：

    test1 () {
      let val = 1
      if (val === 1) {
        return Promise.resolve(1)
      }
    },

结果：在这里插入图片描述
这就说明 return Promise.resolve(1) 效果和 return‘ new Promise…作用一样
再变化：

test1 () {
      let val = 1
      return new Promise((resolve, reject) => {
        if (val === 1) {
          return reject(1)
        }
      })
    }

在这里插入图片描述
reject 之后Promise链直接进入catch中。
再变化：

test1 () {
      let val = 1
      return new Promise((resolve, reject) => {
        if (val === 1) {
          throw new Error(1)
        }
      })
    },

结果
在这里插入图片描述
抛异常也会promise链的catch捕获
再变：

test () {
        this.test1().then((res) => {
        console.log('res', res)
        this.test2()
      }).then((ress) => {
        console.log('ress', ress)
      }).catch((rej) => {
        console.log('rej', rej)
      })
    },

执行结果：
在这里插入图片描述
虽然Pormise链调用了test2(),但是并没有作为Promise链的返回值，所以才会输出上面的结果
再变

test1 () {
      let val = 1
      return new Promise((resolve, reject) => {
        if (val === 1) {
          return reject(1)
        }
      })
    },

   test () {
      this.test1().then((res) => {
        console.log('res', res)
        return this.test2()
      }).catch((e) => {
        console.log('e', e)
      }).then((ress) => {
        console.log('ress', ress)
      }).catch((rej) => {
        console.log('rej', rej)
      })
    },

结果：
在这里插入图片描述
从这个结果可以看出，test1虽然将promise链的状态改为rejected，但是被catch捕获后promise链的状态有恢复了，继续往下执行了

再变

test () {
      this.test1().then((res) => {
        console.log('res', res)
        return this.test2()
      }).catch((e) => {
        console.log('e', e)
        return 33
      }).then((ress) => {
        console.log('ress', ress)
      }).catch((rej) => {
        console.log('rej', rej)
      })
    },