关于javascript:Promise链式调用特性总结

置信各位前端小伙伴对于 Promise 应该很相熟了吧，日常工作中，100% 会用到的一个货色，除非你还在用 callback 解决异步，那我就太拜服了。话不多说，进入正题。

提前申明一下，以下代码在 node 环境中实现，你能够创立一个文件，应用 nodemon 这个工具执行这个文件，就能够进行监听更新，真香。

首先你要创立一个 promise

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

形式一、通过 return 传递后果

p.then(res=>{return res;}).then(res=>{console.log(res)
})

控制台就会输入：first resolve

形式二、通过返回新的 promise resolve 后果

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{resolve('second resolve:'+res)
  })
}).then(res=>{console.log(res)
})

控制台就会输入：second resolve: first resolve
如果在返回的 promise 里加一个异步比方 settimeout 呢，后果会是什么样？

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{// resolve('second resolve:'+res)
    setTimeout(()=>{resolve('second resolve:'+res)
    },2000)
  })
}).then(res=>{console.log(res)
})

控制台期待 2s 后输入：second resolve: first resolve

形式三、通过返回新的 promise reject 起因

既然能够通过新的 promise resolve，那么 reject 应该也能够。

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{setTimeout(()=>{reject('error')
    },2000)
  })
}).then(res=>{console.log(res)
},err=>{console.log('error:'+err)
})

控制台期待 2s 后输入：error: error

形式四、then 函数走了失败回调持续走 then

紧接着上一步，失败后，reject 出起因，持续前面 then

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{setTimeout(()=>{reject('error')
    },2000)
  })
}).then(res=>{console.log(res)
},err=>{console.log('error:'+err)
  // 默认 return undefined
}).then(res=>{console.log('second then success:'+res)
},err=>{console.log('second then error:'+err)
})

控制台会输入两行内容：error: error，second then success: undefined。这就表明在 reject 前面持续 then 会执行下一步的 resolve，如果上一步没有返回值，默认接管 undefined。

形式五、then 中应用 throw new Error 状况

如果在 then 中抛出异样呢，如何显示？

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{setTimeout(()=>{reject('error')
    },2000)
  })
}).then(res=>{console.log(res)
},err=>{console.log('error:'+err)
}).then(res=>{throw new Error('happend error')
}).then(res=>{console.log('third then success'+res)
},err=>{console.log('third then error'+err)
})

控制台会输入：
error: error
third then error Error: happend error
这表明 throw error 抛出异样相似 reject，会由下一步的 then 办法中的错误方法解决。

形式六、在 promise 中应用 catch 进行谬误捕捉

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{setTimeout(()=>{reject('error')
    },2000)
  })
}).then(res=>{console.log(res)
},err=>{console.log('error:'+err)
}).then(res=>{throw new Error('happend error')
}).then(res=>{console.log('third then success'+res)
}).catch(err=>{console.log('catched'+err)
})

控制台会输入：
error: error
catched Error: happend error

如果在 catch 办法的后面 then 中有对上一步谬误的解决方法会怎么样呢？

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{// resolve('second resolve:'+res)
    setTimeout(()=>{reject('error')
    },2000)
  })
}).then(res=>{console.log(res)
},err=>{console.log('error:'+err)
}).then(res=>{throw new Error('happend error')
}).then(res=>{console.log('third then success'+res)
},err=>{console.log('third then error'+ err)
}).catch(err=>{console.log('catched'+err)
})

控制台会输入：
error: error
third then error Error: happend error
这阐明 catch 捕捉，如果 catch 后面有 error 处理函数，catch 不会捕捉异样的。

如果在 catch 前面持续 then 呢？

p.then(res=>{return res;}).then(res=>{return new Promise((resolve,reject)=>{// resolve('second resolve:'+res)
    setTimeout(()=>{reject('error')
    },2000)
  })
}).then(res=>{console.log(res)
},err=>{console.log('error:'+err)
}).then(res=>{throw new Error('happend error')
}).then(res=>{console.log('third then success'+res)
}).catch(err=>{console.log('catched'+err)
  return 'catched error'
}).then(res=>{console.log('catched then'+res)
})

控制台会输入：
error: error
catched Error: happend error
catched then catched error
这阐明 catch 前面是能够持续调用 then 的，catch 在 promise 的源码外面其实也是一个 then，catch 遵循 then 的运行规定。

总结

promise 链式调用，具体是失败还是胜利，取决于以下状况：

胜利的条件

• then return 一个一般的 js 值
• then return 一个新的 promise 胜利态的后果 resolve 解决

失败的条件

• then return 一个新的 promise 失败态的起因 error
• then throw 抛出异样

以上就是 promise 链式调用的一些实际总结，温习温习基础知识。欢送大家交换。

参考资料：

• promise+ 标准