【JavaScript】Promise之七大关键问题（附代码）

上篇文章讲述了一些👉🏻关于Promise的API等内容。 本篇文章讲讲在使用Promise的过程中要注意的几个关键问题。🤳

🧩promise 的七大关键问题 问题一 ✨如何改变 promise 的状态?

1. resolve(value): 如果当前是 pending 就会变为 resolved
2. reject(reason): 如果当前是 pending 就会变为 rejected
3. 抛出异常: 如果当前是 pending 就会变为 rejected

  let p = new Promise((resolve, reject) => {
    //  1.resolve函数
    resolve('ok') //pending => fulfilled (resolved)
    //  2.reject函数
    reject('error')  //pending => rejected
    //  3.抛出错误
    throw '出问题了'
  })
  console.log(p)

问题二 ✨一个 promise 指定多个成功/失败回调函数, 都会调用吗?

当 promise 改变为对应状态时都会调用

问题三 ✨改变 promise 状态和指定回调函数谁先谁后?

1️⃣ 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

2️⃣ 如何先改状态(resolve()/reject())再指定回调(then先执行)?

• 在执行器中直接调用 resolve()/reject()
• 延迟更长时间才调用 then()（执行器中有1s的定时器，then方法中指定一个2s的定时器）

3️⃣ 如何先指定回调(then先执行)再改状态(resolve()/reject())？

• 在执行器里面的任务为异步时：定时器

4️⃣ 什么时候才能得到数据?

• 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
• 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

💤 总结就是执行回调一定是在状态发生改变之后才能执行回调拿到数据。

问题四 ✨promise.then()返回的新 promise 的结果状态由什么决定?

1. 简单表达: 由 then()指定的回调函数执行的结果决定
2. 详细表达:

• 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
• 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
• 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

  let p = new Promise((resolve, reject) => {
    reject('ok')
  })

  // 执行 then 方法
  let result = p.then(value => {
    // console.log(value)
    // 1.抛出错误
    // throw '出了问题'
    // 2.返回结果是非 promise 类型的对象
    // return 123
    // 3.返回结果是 promise 类型的对象
    return new Promise((resolve, reject) => {
      resolve('success')
    })
  }, reason => {
    console.log(reason) //没有返回值，默认返回值为undefined，状态为成功
    // return 123  
  })
  console.log(result)

问题五 ✨promise 如何串连多个操作任务?

1. promise 的 then()返回一个新的 promise, 可以形成 then()的链式调用
2. 通过 then 的链式调用串连多个同步/异步任务

  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('ok')
    }, 1000)
  })

  p.then(value => {
    console.log(value) //打印ok
    return new Promise((resolve, reject) => {
      resolve('success')
    }).then(value => {
      console.log(value) //打印success
    }).then(value => {
      console.log(value) //打印undefined 因为没有返回值
    })
  })

问题六 ✨promise 异常传透?

1. 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调
2. 前面任何操作出了异常, 都会传到最后失败的回调中处理

  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('ok')
      // reject('error')
    }, 1000)
  })

  p.then(value => {
    // console.log(111)
    throw '失败了'
  }).then(value => {
    console.log(222)
  }).then(value => {
    console.log(333)
  }).catch(reason => {
    console.log(reason)
  })

//打印出 失败了

问题七 ✨如何中断 promise 链?

当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数时，

方法如下🔻:

方法: 在回调函数中返回一个 pendding 状态的 promise 对象

  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('ok')
    }, 1000)
  })

  p.then(value => {
    console.log(111)
    // 有且只有一种方式 返回一个pending无状态的promise，
    // 因为状态没有改变，then回调只接受成功和失败，下面的回调函数都不能执行
    return new Promise(() => { })
  }).then(value => {
    console.log(222)
  }).then(value => {
    console.log(333)
  }).catch(reason => {
    console.log(reason)
  })

今天的分享就到这里啦 🌹

关注💖收藏⭐点赞🔥评论🥰