JS 动态构建Promise then/catch 链

构建Promise 链的方式

如下两种方式，构建的promise then/catch链结果不同

方式1

// then
let prom = Promise.resolve()
prom.then(() => {
  console.log('1')  // 打印
  return Promise.reject()
})
prom.then(() => {
  console.log('2') // 打印
})
// catch
let p = Promise.reject()
p.catch(() => {
  console.log('err1 catch') // 打印
})
p.catch(() => {
  console.log('err2 catch') // 打印
})

两个catch 都被执行。

由此看出

• 对于状态已经resolve的promise，调用then方法，传入的函数会立即执行。
• 对于状态已经reject的promise，调用catch方法，传入的函数会立即执行。

方式2（常规使用方式）

// then
Promise.resolve().then(() => {
  console.log('1') // 输出
  return Promise.reject()
}).then(() => {
  console.log('2') // 不输出
})
// catch
Promise.reject().catch(() => {
  console.log('err1 catch') // 输出
}).catch(() => {
  console.log('err2 catch') // 不输出
})

仅第一个then/catch 被执行。

若要进入第二个then， 则第一个then中不能返回Promise.reject()

若要进入第二个catch 需要在第一个catch 中返回Promise.reject()

这种结果才是我们需要的

使用循环构建Promise 链的正确方式

let p = Promise.reject()
for (let i = 0; i < 2; i++) {
  // 一定要赋值给p
  p = p.catch(err => {
    console.log('err :>> ' + i, err)
  })
}

将结果赋值给p，则达成方式2效果，then同理