置信各位前端小伙伴对于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+标准