Promise的链式调用,简写方式

Promise的链式调用,简写方式
<script>
  /**
   * 需求:
   *   网络请求得到数据aaa,假设自己有十行代码处理,将处理后的aaa111传入
   * 继续进行代码处理,得到aaa222,再进行处理
   *
   */
  new Promise((resolve) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    //1.自己处理10行代码
    console.log(res, '第一层10行代码处理');
    //2.对结果进行10行代码处理
    return new Promise((resolve) => {
      resolve(res + '111')
    })
  }).then((res) => {
    console.log(res, '第二层10行代码处理');

    return new Promise((resolve) => {
      resolve(res + '222')
    })
  }).then(res => {
    console.log(res, '第三层10行代码处理');
  })
  /**
   *   只有第一步有异步操作,其他两步根本没有异步操作,只是为了让结构更加清晰,
   *采用Promise。
   *  我们可以采用简写方式,直接调用Promise.resolve方法
   */
  new Promise((resolve) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    //1.自己处理10行代码
    console.log(res, '第一层10行代码处理');
    //2.对结果进行10行代码处理
    return  Promise.resolve(res + '111')

  }).then((res) => {
    console.log(res, '第二层10行代码处理');

    return  Promise.resolve(res + '222')
  }).then(res => {
    console.log(res, '第三层10行代码处理');
  })
  /**
   * 继续简化写法,省略掉Promise.resolve
   */
  new Promise((resolve) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    //1.自己处理10行代码
    console.log(res, '第一层10行代码处理');
    //2.对结果进行10行代码处理
    return  res + '111'

  }).then((res) => {
    console.log(res, '第二层10行代码处理');

    return  res + '222'
  }).then(res => {
    console.log(res, '第三层10行代码处理');
  })
  /**
   * 同样如果要使用reject也可以简写
   */
  new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('aaa')
    }, 1000)
  }).then(res => {
    //1.自己处理10行代码
    console.log(res, '第一层10行代码处理');
    //2.对结果进行10行代码处理
    return Promise.reject('error message')
    //也可以使用throw
    //throw 'error message'

  }).then((res) => {
    console.log(res, '第二层10行代码处理');

    return  res + '222'
  }).then(res => {
    console.log(res, '第三层10行代码处理');
  }).catch(err=>{
    console.log(err);
  })

</script>

没有异步操作,依然可以使用Promise进行链式调用,使代码结构更加清晰,操作分工明了

如果只有成功的情况,可以在new Promise时只传入resolve参数,reject参数是可选项

没有异步操作,可以有两种简写形式。

如果是失败也可以简写Promise.reject,也可以使用throw来抛出错误,最后在catch里都可以捕获,不过使用reject,下边的then就会失效。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值