一. Promise

1 为什么需要 promise

需求

通过 ajax 请求 id, 再根据 id 请求用户名, 再根据用户名获取 email

回调地狱

在回调函数中嵌套回调

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)

4 用 promise 解决回调地狱