Promise基础详解，快速带你了解Promise的各种使用方式及其原理

一、Promise是什么？

1. Promise理解

抽象表达:

• Promise 是一门新的技术(ES6 规范)

• Promise 是 JS 中进行异步编程的新解决方案

  异步编程

  • fs 文件操作

    require('fs').readFile('./index.html', (err,data)=>{})
    1

  • 数据库操作

  • AJAX

      $.get('/server', (data)=>{})
    1

  • 定时器

    setTimeout(()=>{}, 2000);
    1

• 备注：旧方案是单纯使用回调函数

具体表达:

• 从语法上来说: Promise 是一个构造函数

  

• 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/ 失败的结果

2. Promise的状态改变

实例对象中的一个属性 『PromiseState』

• pending 未决定的

• resolved / fullfilled 成功

• rejected 失败

• pending 变为 resolved/fullfilled

• pending 变为 rejected

• 说明:

  • 只有这 2 种, 且一个 promise 对象只能改变一次
  • 无论变为成功还是失败, 都会有一个结果数据
  • 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

• 如何改变 promise 的状态

  • resolve(value): 如果当前是 pending 就会变为 resolved
  • reject(reason): 如果当前是 pending 就会变为 rejected
  • 抛出异常: 如果当前是 pending 就会变为 rejected

3. Promise 对象的值

• 实例对象中的另一个属性 『PromiseResult』

• 保存着异步任务『成功/失败』的结果

4. Promise的基本流程

二、为什么使用Promise？

1. 指定回调函数的方式更加灵活

• 旧的: 必须在启动异步任务前指定
• Promise: 启动异步任务 => 返回promie对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)

2. 支持链式调用, 可以解决回调地狱问题

• 什么是回调地狱?

  回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

  

• 回调地狱的缺点

  • 不便于阅读
  • 不便于异常处理

• 解决方案

  • promise 链式调用

• 终极解决方案

  • async/await

三、Promise的基本使用

1. 基本编码流程

// 1) 创建 promise 对象(pending 状态), 指定执行器函数
const p = new Promise((resolve, reject) => {
  // 2) 在执行器函数中启动异步任务
  setTimeout(() => {
    const time = Date.now()
    // 3) 根据结果做不同处理
    // 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状态
    if (time % 2 === 1) {
      resolve('成功的值 ' + time)
    } else { // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为rejected 状态
      reject('失败的值' + time)
    }
  }, 2000)
})
// 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then(
  value => { // 成功的回调函数 onResolved, 得到成功的 vlaue
    console.log('成功的 value: ', value)
  },
  reason => { // 失败的回调函数 onRejected, 得到失败的 reason
    console.log('失败的 reason: ', reason)
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2. promise 封装 ajax 异步请求

/*
可复用的发 ajax 请求的函数: xhr + promise
*/
function promiseAjax(url) {
  return new Promise((resolve, reject) => {
    // 1. 创建xhr对象
    const xhr = new XMLHttpRequest();
    // 2. 初始化
    xhr.open('GET', url);
    // 3. 发送
    xhr.send()
    // 4. 绑定事件，处理响应结果
    xhr.onreadystatechange = function () {
      // 判断
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          // 控制台输出响应体
          resolve(xhr.response)
        } else {
          reject(xhr.status)
        }
      }
    }
  })
}
promiseAjax('https://api.apiopen.top/api/sentences')
  .then(
    data => {
      console.log('显示成功数据', data)
    },
    error => {
      alert(error.message)
    }
  )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

四、Promise的API

1. Promise 构造函数: Promise (excutor) {}

• executor 函数: 执行器 (resolve, reject) => {}

• resolve 函数: 内部定义成功时我们调用的函数 value => {}

• reject 函数: 内部定义失败时我们调用的函数 reason => {}

• 说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

• Promise的同步与异步问题：

  new Promise((resolve, reject) => {
    console.log("resolve before");
    resolve("success")
  }).then(res => console.log(res))
  console.log("同步");
  
  // resolve before
  // 同步
  // success
  1
  2
  3
  4
  5
  6
  7
  8
  9

  • Promise 本身是同步的(“resolve before” 在"同步"之前先执行),而then()则是异步任务(“success” 在"同步之后再执行")
  • 即Promise本身是同步的，而then方法是异步任务

2. Promise.prototype.then 方法: (onResolved, onRejected) => {}

• onResolved 函数: 成功的回调函数 (value) => {}
• onRejected 函数: 失败的回调函数 (reason) => {}
• 返回一个新的 promise 对象
  • 返回的新 promise 的结果状态由什么决定?
    • 简单表达: 由 then()指定的回调函数执行的结果决定
    • 详细表达:
      • ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
      • ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
      • ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
• then方法是异步的
• 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调

3. Promise.prototype.catch 方法: (onRejected) => {}

在 promise 被拒绝时调用的函数

• onRejected 函数: 失败的回调函数 (reason) => {}
• promise 异常传透
  • 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调
  • 前面任何操作出了异常, 都会传到最后失败的回调中处理
• 说明: then()的语法糖, 相当于: then(undefined, onRejected)

4. Promise.resolve 方法: (value) => {}

• value: 成功的数据或 promise 对象
• 说明: 返回一个成功/失败的 promise 对象
  • value为非Promise类型的对象，则返回的结果为成功Promise对象
  • value是一个 Promise对象，那么将返回这个 Promise对象

5. Promise.reject 方法: (reason) => {}

• reason: 失败的原因
• 说明: 返回一个失败(带有拒绝原因)的 Promise 对象
  • reason是什么则返回的Promise对象的结果(PromiseResult)就是什么

6. Promise.all 方法: (promises) => {}

此方法在集合多个 promise 的返回结果时很有用。

• promises: 包含 n 个 promise 的数组
• 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就 直接失败
  • 如果都成功，返回的结果(PromiseResult)是全部成功结果形成的数组
  • 如果存在失败，直接失败，就返回的结果(PromiseResult)是第一个失败结果

7. Promise.race 方法: (promises) => {}

一旦迭代器中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。

• promises: 包含 n 个 promise 的数组
• 说明: 返回一个新的 promise, 第一个完成/失败的 promise 的结果状态就是最终的结果状态
• 即返回的是第一个完成/失败的Promise对象

五、Promise的几个关键问题

1. 一个 promise 指定多个成功/失败回调函数, 都会调用吗?

• 当 promise 改变为对应状态时都会调用

  let p = new Promise((resolve, reject) => {
    resolve('ok')
  })
  // 指定回调1
  p.then(value => {
    console.log(value)
  })
  // 指定回调2
  p.then(value => {
    console.log(value + 1)
  })
  
  // ok
  // ok1
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

2. 改变 promise 状态和指定回调函数谁先谁后?

• 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
• 如何先改状态再指定回调?
  • ① 在执行器中直接调用 resolve()/reject()
  • ② 延迟更长时间才调用 then()
• 什么时候才能得到数据?
  • ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
  • ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

let p = new Promise((resolve, reject) => {
  // 这里同步先改变状态，再执行.then并指定回调且执行
  // resolve('ok')
  // 这里异步,先执行.then并指定回调,then的回调是对应时机执行
  setTimeout(() => {
    resolve('ok')
  }, 1000);

})
p.then(
  value => {
    console.log(value)
  },
  reason => {
    console.log(reason)
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. promise 如何串连多个操作任务?

• promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用
• 通过 then 的链式调用串连多个同步/异步任务

let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('ok')
      }, 1000);
    })
    p.then(value => {
      return new Promise((resolve, reject) => {
        resolve('success')
        // reject('err')
      })
    }).then(value => {
      console.log(value)
      return 123
    }).then(value => {
      console.log(value)
      throw 'err'
    }).then(() => {}, reason => {
      console.log(reason)
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. 中断 promise 链

• 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
• 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('ok')
      }, 100);
    })
    p.then(value => {
      // 中断Promise链条有且仅有一个方式：返回一个pending状态的Promise对象
      console.log(111)
    }).then(value => {
      return new Promise(() => {})
      console.log(222)
    }).then(value => {
      console.log(333)
    }).catch(reason => {
      console.warn(reason)
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16