Promise链式调用特性总结

时间:2020-9-6 作者:admin

相信各位前端小伙伴对于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链式调用的一些实践总结,复习复习基础知识。欢迎大家交流。

参考资料:

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。