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