回调地狱

  • A+
所属分类:js vue 前端

在回调函数中嵌套回调

Promise解决了回调地狱

2 Promise的基本使用

Promise是一个构造函数, 通过new关键字实例化对象

语法

new Promise((resolve, reject)=>{})
  • Promise接受一个函数作为参数

  • 在参数函数中接受两个参数

    • resolve: 成功函数

    • reject: 失败函数

promise实例

promise实例有两个属性

  • state: 状态

  • result: 结果

1) promise的状态

第一种状态: pending(准备, 待解决, 进行中)

第二种状态: fulfilled(已完成, 成功)

第三种状态: rejected(已拒绝, 失败)

2) promise状态的改变

通过调用resolve()和reject()改变当前promise对象的状态

示例

const p = new Promise((resolve, reject) => {
  // resolve(): 调用函数, 使当前promise对象的状态改成fulfilled
  resolve()})console.dir(p) // fulfilled

示例

const p = new Promise((resolve, reject) => {
  // resolve(): 调用函数, 使当前promise对象的状态改成fulfilled
  // reject(): 调用函数, 使当前promise对象的状态改成rejected

  // resolve()
  reject()})console.dir(p)
  • resolve(): 调用函数, 使当前promise对象的状态改成fulfilled

  • reject(): 调用函数, 使当前promise对象的状态改成rejected

promise状态的改变是一次性的

3) promise的结果

示例

const p = new Promise((resolve, reject)=> {
  // 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
  resolve('成功的结果')
  //reject('失败的结果')})console.dir(p)

3 Promise的方法

1) then方法

示例

const p = new Promise((resolve, reject)=> {
  // 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
  resolve('成功的结果')
  //reject('失败的结果')})// then方法函数// 参数// 1. 是一个函数// 2. 还是一个函数// 返回值: 是一个promise对象p.then(()=>{
  // 当promise的状态是fulfilled时, 执行
  console.log('成功时调用')}, () => {
  // 当promise的状态是rejected时, 执行
  console.log('失败时调用')})console.dir(p)

示例

const p = new Promise((resolve, reject)=> {
  // 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
  //resolve('123')
  reject('失败的结果')})// then方法函数// 参数// 1. 是一个函数// 2. 还是一个函数// 返回值: 是一个promise对象p.then((value)=>{
  // 当promise的状态是fulfilled时, 执行
  console.log('成功时调用', value)}, (err) => {
  // 当promise的状态是rejected时, 执行
  console.log('失败时调用', err)})console.dir(p)
  • 在then方法的参数函数中, 通过形参使用promise对象的结果

then方法返回一个新的promise实例, 状态是pending

const p = new Promise((resolve, reject)=> {
  // 通过调用resolve, 传递参数, 改变 当前promise对象的 结果
  resolve('123')
  //reject('失败的结果')})// then方法函数// 参数// 1. 是一个函数// 2. 还是一个函数// 返回值: 是一个promise对象const t = p.then((value)=>{
  // 当promise的状态是fulfilled时, 执行
  console.log('成功时调用', value)}, (reason) => {
  // 当promise的状态是rejected时, 执行
  console.log('失败时调用', reason)})console.dir(t)

promise的状态不改变, 不会执行then里的方法

// 如果promise的状态不改变, then里的方法不会执行new Promise((resolve, reject) => {}).then((value) => {
  console.log('成功')}, (reason) => {
  console.log('失败')})

在then方法中, 通过return将返回的promise实例改为fulfilled状态

// 如果promise的状态不改变, then里的方法不会执行const p = new Promise((resolve, reject) => {
  resolve()})const t = p.then((value) => {
  console.log('成功')
  // 使用return可以将t实例的状态改成fulfilled
  return 123}, (reason) => {
  console.log('失败')})t.then((value) => {
  console.log('成功2', value)}, (reason) => {
  console.log('失败')})

如果在then方法中, 出现代码错误, 会将返回的promise实例改为rejected状态

// 如果promise的状态不改变, then里的方法不会执行const p = new Promise((resolve, reject) => {
  resolve()})const t = p.then((value) => {
  console.log('成功')
  // 使用return可以将t实例的状态改成fulfilled
  //return 123

  // 如果这里的代码出错, 会将t实例的状态改成rejected
  console.log(a)}, (reason) => {
  console.log('失败')})t.then((value) => {
  console.log('成功2', value)}, (reason) => {
  console.log('失败', reason)})

2) catch方法

示例

const p = new Promise((resolve, reject) =>{
  // reject()
  // console.log(a)
  throw new Error('出错了')})// 思考: catch中的参数函数在什么时候被执行?// 1. 当promise的状态改为rejected时, 被执行// 2. 当promise执行体中出现代码错误时, 被执行p.catch((reason) => {
  console.log('失败', reason)})console.log(p)


发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: