Promise的链式调用问题

总结：

1. resolve或者reject不会阻止Promise内的其余代码的执行
2. resolve和reject同时触发，Promise只会改变第一次的状态
3. 上一个.then中回调函数的返回值决定了下一个.then会执行不同的回调

案例一：

const p = new Promise((resolve,reject) => {
  console.log(1)
  reject()
  console.log(2)
  console.log(3)
}).then(res => {
  console.log(4)
}).catch(res => {
  console.log(5)
})
// 1 2 3 5

即使resolve或reject了，后续的代码也会执行

案例二：

const p = new Promise((resolve,reject) => {
  console.log(1)
  resolve()
  console.log(2)
  reject()
  console.log(3)
})
p.then(res => {
  console.log(4, p)
}).catch(res => {
  console.log(5, p)
})
// 1 2 3 4 Promise<fulfilled>

const p = new Promise((resolve,reject) => {
  console.log(1)
  reject()
  console.log(2)
  resolve()
  console.log(3)
})
p.then(res => {
  console.log(4, p)
}).catch(res => {
  console.log(5, p)
})
// 1 2 3 5 Promise<rejected>

resolve和reject同时触发，Promise只会改变第一次的状态

案例三：

const p = new Promise((resolve,reject) => {
  resolve()
  // resolve执行then => 输出3
})
p.then(res => {
  console.log(3)
  // 没有返回值 执行then => 输出5
}).catch(res => {
  console.log(4)
}).then(res => {
  console.log(5)
  return Promise.reject()
  // 返回 Promise.reject 执行catah => 输出7
}).then(res => {
  console.log(6)
}).catch(res => {
  console.log(7)
  // 没有返回值 执行then => 输出8
}).then(res => {
  console.log(8)
  return Promise.resolve()
  // 返回Promise.resolve 执行then => 输出10
}).catch(res => {
  console.log(9)
}).then(res => {
  console.log(10)
  return 11
  // 返回固定值 执行then =>输出 11
}).then(res => {
  console.log(res)
  throw error
  // 抛出错误 执行catch => 输出 12
}).catch(res => {
  console.log(12)
}).then(res => {
  console.log(13)
}).catch(res => {
  console.log(14)
})
// 3 5 7 8 10 11 12 13

如何中断链式

如果等到.catch()处理完(then同理), 想结束promise链, 不想再让其链式调用下去了, 可以作如下操作:

.catch((err) => {
  console.log('onRejected', err);
  // 中断promise链:
  return new Promise(() => {})
})

通过返回一个状态一直为pending的promise即可