Promise链式调用的特点、特性

文章详细阐述了Promise的使用,包括如何声明、传递结果、处理异步操作以及错误处理。在成功链式调用中,`then`返回普通值或新Promise的成功结果。在失败情况下,`then`返回新Promise的失败原因或抛出异常。`catch`用于捕获错误,但如果有`reason`,则不会执行后续的`.catch`。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

声明一个最简单的promise

let promise = new Promise((resolve, reject) => {
  resolve('succeed')
})

通过return传递结果

promise.then(res => {
  return res
})
  .then(res => {
    console.log(res); //succeed
  }

通过新的promise resolve结果

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      resolve(res)
    })
  })
  .then(res => {
    console.log(res); //succeed
  })

那如果是异步呢?

promise.then(res => {
  return res
})
  .then(res => {
    // 只要你new Promise
    //不管 异步 还是 同步
    // 都会走 后边.then
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(res)
      }, 2000)
    })
  })
  .then(res => {
    console.log(res); //succeed
  })

结果一样,只不过它可以接收异步或同步

通过新的promise reject原因/错误

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// Rejected:Error
  })

那如果.then走了失败的回调函数后再走.then的结果呢?

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// Rejected:Error
    // 默认 return undefined
  })
  .then((res) => {
    console.log("FullFilled:", res);
  }, (err) => {
    console.log("Rejected:", err);
  })

image.png

在then中抛出错误 throw new Error

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// 还走着里Rejected:Error
    // 默认 return undefined
  })
  .then((res) => {
    throw new Error('Throw Error') //这里抛出错误
  })
  .then((err) => {
    console.log(err);
  }, (err) => {
    console.log("Exception: Error"); //还有这里Throw Error
  })																 //会在err这里拿到

image.png

用catch来捕获错误呢?会发生什么

promise.then(res => {
  return res
})
  .then(res => {
    return new Promise((resolve, reject) => {
      reject('ERROR')
    })
  })
  .then(res => {
    console.log(res);
  }, (err) => {
    console.log("Rejected:", err);// Rejected:Error
    // 默认 return undefined
  })
  .then((res) => {
    throw new Error('Throw Error')
  })
  .then((err) => {
    console.log(err);
  }, (reason) => {
    console.log('reason', reason);//reason: Throw Error
  })
  .catch(err => {
    console.log("catch:", err); 
  })

image.png
我发现了!  它会找最近的错误来抛出 有reason就不会走.catch

总结

注意 .catch下边 还继续可以使用.then.catch相当于一个 “.than

成功的条件

then return 普通的JS value
then return 新的promise成功态的结果 value

失败的条件

then return 新的promise失败态的原因 reason
then 抛出了异常 throw new Error

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值