Promise - 09 Promise 关键的7个问题

1 ：如何改变 promise 的状态

基本方法有以下三种

• resolve(value): 当前是 pending 状态时会变成 resolved
• reject(reason): 当前是 pending 状态时会变成 rejected
• 抛出异常（主动抛出或者系统抛出）： 当前是 pending 状态时会变成 rejected

const p = new Promise((resolve, reject) => {
   // resolve(1) // promise改变为resolved状态
  // reject(2) // promise改变为 rejected状态
  throw new Error('3') // promise 改变为 rejected 状态 reason 为3
 // throw 4 //  // promise 改变为 rejected 状态 reason 为4
})

2: 一个 promise 被指定多个成功/失败回调函数，都会调用么?

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

p.then(v => {
  console.log('value1', v)
}).catch(err => {
  console.log('reason1', err)
})

p.then(v => {
  console.log('value2', v)
}).catch(err => {
  console.log('reason2', err)
})

p2 被制定了两个成功和失败的回调，实际上两个都会被调用

3: 改变 promise 状态和指定回调函数谁先谁后呢？

• 都有可能，正常情况下是先指定回调再改变状态，但是也可以先改变状态再指定回调
  • 正常情况：先指定回调函数再改变状态

     new Promise((resolve, reject) => {
         setTimeout(() => {
           resolve('然后再改变状态，再异步执行回调函数') 
         })
     }).then(v => {
         console.log('then的时候先指定回调函数，先保存当前指定的回调函数')
     }).catch(err => {
         console.log('then的时候先指定回调函数，先保存当前指定的回调函数')
     })
  

  • 那如何先改变转改在指定回调呢？

   // 方法1: 
   // 上面代码做下修改, 同步改变状态，同步指定回调函数，（.then()是同步执行）
     new Promise((resolve, reject) => {
         resolve('先改变状态，存起来')
     }).then(v => {
         console.log('后指定回调函数，然后异步调用回调函数')
     }).catch(err => {
       console.log('后指定回调函数，然后异步调用回调函数')
     })
  
   // 方法2: 不常用
   const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
           resolve('1秒后返回数据') 
        },1000)
   })
  
   setTimeout(() => {
     p1.then(v => {
       console.log('1.5秒后.then()')
      }).catch(err => {
        console.log('1.5秒后.then()')
       })
   } , 1500)
  

4: promise.then()返回的新 promise 结果状态由什么决定？

• 简单说： 由 then() 指定的回调函数执行的结果决定
• 详细点说：
  • 如果抛出异常， 则新的promise 变为rejected,reason为抛出的异常
  • 如果返回是非 promise 的任意值，新 promise 变为 resolved ，value为返回值
  • 如果返回是一个新的 promise ， 此 promise 返回值就是新的 promise 的结果

  new Promise((resolve, reject) => {
          resolve('1')
      }).then(v => {
          console.log('v1',v)
      }).then(v => {
        console.log('v2',v)
      })

// v1, 1
// v2, undefined

5: promise 如何串联多个操作任务

• promise 的 then() 返回一个新的 promise，可以看成 then() 的链式调用
• 通过 then 的链式调用串联过个同步或者异步任务

  new Promise((resolve, reject) => {
        setTimeout(() => {    // setTimeout 模拟异步任务
            resolve('1') 
         },1000)
      }).then(v => {
          console.log('任务1结果，',v) // 直接 resolve 执行同步任务
          return 2
      }).then(v => {
        console.log('任务2',v)

        setTimeout(() => {
          console.log('执行异步任务3')
          return new Promise((resolve,  reject) => {
                resolve('3')
            })

        },1000)
      }).then(v => {
          console.log('任务3的结果： ',v) 
      })

6: promise 的异常穿透

• 当使用then 链式调用时，可以在最后使用失败的回调
• 前面任何操作出现了异常，都会传到最后的失败回调函数中

new Promise((resolve, reject) => {
     // resolve('1') 
        reject(1)
      }).then(v => {
          console.log(v) 
      }).then(v => {
          console.log(v)
      }).then(v => {
          console.log(v) 
      }).catch(err => {
          console.log('失败的原因：'，err)
      })
// 失败的原因： 1

上面代码在第一个promis出错后并不是直接到.catch 方法中， 还是逐级处理最后到达的.catch 方法， 其实相当于：

new Promise((resolve, reject) => {
     // resolve('1') 
        reject(1)
      }).then(v => {console.log(v)}, r => {throw r})
      .then(v => {console.log(v)}, r => Promise.reject(r))
      .then(v => {console.log(v)}, r => {throw r})
      .catch(err => {
          console.log('失败的原因：'，err)
      })

7: 如何终端一个 promise 链

• 当使用 then 链式调用时，在中间中断，不再调用之后的回调函数
• 如何中断： 在回调函数中返回一个 pendding 状态的 promise

new Promise((resolve, reject) => {
     // resolve('1') 
        reject(1)
      }).then(v => {
          console.log(v) 
      }).then(v => {
          console.log(v)
          return new Promise(() => {}) // 返回一个 pending 状态的 promise
      }).then(v => {
          console.log(v) 
      }).catch(err => {
          console.log('失败的原因：'，err)
      })