# Promise\_入门到自定义

Promise 介绍与使用

Promise 是什么

  • 抽象表达:

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

    • Promise 是 JS 中进行异步编程的新解决方案(例如: fs 文件操作,数据库操作, ajax ,定时器等)

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

  • 具体表达:

    • 从语法上来说: Promise 是一个构造函数
    • 从功能上来说: Promise 对象用来封装一个异步操作并可以获取其成功 / 失败的结果值

为什么使用 Promise

  • 01 指定回调函数的方式更加灵活

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

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

    • 什么是回调地狱
      • 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件
      • 回调地狱,例如:

    1654504833819

    • 回调地狱的缺点
      • 不便于阅读
      • 不便于异常处理
    • 解决方案
      • promise 链式调用
    • 终极解决方案
      • async / await

Promise 初体验

抽奖案例_利用函数回调实现

1
2
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous" />
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
35
36
<body>
  <div class="container">
    <h1>Promise初体验</h1>
    <hr />
    <button type="button" id="btn" class="btn btn-success">点击抽奖</button>
  </div>
  <script>
    /*需求:
            点击按钮,2s后显示是否中奖(30%概率中奖)
            若中奖弹出恭喜恭喜，奖品为10元劳斯莱斯优惠券
            若未中奖弹出再接再厉
        */

    //00 生成随机函数
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1) + m - 1)
    }

    //01 获取元素对象
    const btn = document.querySelector('#btn')
    //02 绑定点击事件
    btn.addEventListener('click', function () {
      //02.1 开启定时器
      setTimeout(() => {
        //02.2 获取一个 1 - 100 的随机数
        let n = rand(1, 100)
        //02.3 判断 中奖率
        if (n <= 30) {
          alert('恭喜恭喜，奖品为10元劳斯莱斯优惠券')
        } else {
          alert('再接再厉')
        }
      }, 1000)
    })
  </script>
</body>

抽奖案例_利用 Promise 实现

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<body>
  <div class="container">
    <h1>Promise初体验</h1>
    <hr />
    <button type="button" id="btn" class="btn btn-success">点击抽奖</button>
  </div>
  <script>
    /*需求:
        点击按钮,2s后显示是否中奖(30%概率中奖)
        若中奖弹出恭喜恭喜，奖品为10元劳斯莱斯优惠券
        若未中奖弹出再接再厉
    */

    //01 生成随机函数
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1) + m - 1)
    }

    //02 添加点击事件
    btn.addEventListener('click', function () {
      //参数一: resolve 解决 函数类型 成功时的回调
      //参数二: reject 拒绝 函数类型 失败时的回调
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          //03 获取一个 1 - 100 的随机数
          let n = rand(1, 100)
          //04 判断 中奖率
          if (n <= 30) {
            resolve(n) //将Promise实例对象的状态设置为 成功,并传递成功时的参数
          } else {
            reject(n) //将Promise实例对象的状态设置为 失败,并传递失败时的参数
          }
        }, 1000)
      })

      //05 调用 then 方法:
      //   Promise实例对象p的状态为成功时执行第一个回调,失败则执行第二个回调,回调中的形参用于接收参数
      p.then(
        (value) => {
          alert('恭喜恭喜，奖品为10元劳斯莱斯优惠券' + value)
        },
        (reason) => {
          alert('再接再厉' + reason)
        }
      )
    })
  </script>
</body>

Promise 读取文件

回调函数形式读取文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//需求:读取同文件夹下的 ./resource/contant.txt 文件

//00 引入fs模块
const fs = require('fs')

//01 回调函数形式 读取文件
fs.readFile('./resource/contant.txt', (err, data) => {
  //02 判断是否读取出错,出错则抛出异常 err:错误对象
  if (err) {
    throw err
  }
  //03 若成功读取到文件  data:读取到数据
  console.log(data.toString())
})

Promise 方法读取文件

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
//00 引入fs模块
const fs = require('fs')

//01 Promise方法读取文件
const p = new Promise((resolve, reject) => {
  fs.readFile('./resource/contant.txt', (err, data) => {
    //02 判断是否读取出错,出错则抛出异常 err:错误对象
    if (err) {
      reject(err)
    } else {
      //03 若成功读取到文件  data:读取到数据
      resolve(data)
    }
  })
})

//04 调用 then 方法
p.then(
  (value) => {
    console.log(value.toString())
  },
  (reason) => {
    console.log(reason)
  }
)

Promise 发送 ajax 请求

原生 JS 写法

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
<body>
  <div class="container">
    <h1>005_发送Ajax请求_函数回调</h1>
    <hr />
    <button type="button" id="btn" class="btn btn-success">点击抽奖</button>
  </div>
  <script>
    //01 获取元素对象
    const btn = document.querySelector('#btn')

    //02 绑定点击事件,发送ajax请求获取数据
    btn.addEventListener('click', function () {
      //1.创建ajax对象
      const xhr = new XMLHttpRequest()
      //2.初始化
      xhr.open('GET', 'https://api.apiopen.top/getJoke')
      //3.发送
      xhr.send()
      //4.处理响应结果
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          //判断响应状态码
          if (xhr.status >= 200 && xhr.status < 300) {
            //获取到响应结果
            console.log(xhr.response)
          } else {
            //输出响应状态码
            console.log(xhr.status)
          }
        }
      }
    })
  </script>
</body>

Primse 写法

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
35
36
37
38
39
40
41
42
43
44
45
46
<body>
  <div class="container">
    <h1>Promise发送ajax请求</h1>
    <hr />
    <button type="button" id="btn" class="btn btn-success">点击抽奖</button>
  </div>
  <script>
    //01 获取元素对象
    const btn = document.querySelector('#btn')

    //02 绑定点击事件,发送ajax请求获取数据
    btn.addEventListener('click', function () {
      const p = new Promise((resolve, reject) => {
        //1.创建ajax对象
        const xhr = new XMLHttpRequest()
        //2.初始化
        xhr.open('GET', 'https://api.apiopen.top/getJoke')
        //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)
            }
          }
        }
      })

      //03 调用then方法
      p.then(
        (value) => {
          console.log(value)
        },
        (reason) => {
          console.log(reason)
        }
      )
    })
  </script>
</body>

封装一个方法读取文件

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
/** 需求:
 * 封装一个函数用于读取文件内容
 * 参数:path 文件路径
 * 返回:Promise实例对象
 *  */

//01 函数封装
function mineReadFile(path) {
  return new Promise((resolve, reject) => {
    //读取文件
    require('fs').readFile(path, (err, data) => {
      //判断
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

//02 调用方法
mineReadFile('./resource/contant.txt').then(
  (value) => {
    console.log(value.toString())
  },
  (reason) => {
    console.log(reason)
  }
)

util.promisify 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//01 引入util模块  fs模块
const util = require('util')
const fs = require('fs')

//02 util.promisify方法返回一个新的函数
let mineReadFile = util.promisify(fs.readFile)

//03 读取文件
mineReadFile('./resource/contant.txt').then(
  (value) => {
    console.log(value.toString())
  },
  (reason) => {
    console.log(reason)
  }
)

封装一个方法发送 ajax 请求

  • 封装一个方法,发送 ajax 请求:
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
35
36
37
38
39
<body>
  <script>
    //01 函数封装
    function sendAJAX(url) {
      return new Promise((resolve, reject) => {
        //1.创建对象
        const xhr = new XMLHttpRequest()
        //将响应结果设置为json格式
        xhr.responseType = 'json'
        //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)
            }
          }
        }
      })
    }

    //02 调用函数
    //https://api.apiopen.top/getJoke
    sendAJAX('https://api.github.com/search/users?q=jquery').then(
      (value) => {
        console.log(value)
      },
      (reason) => {
        console.log(reason)
      }
    )
  </script>
</body>

Promise API

Promise 的状态

  • Promise 的状态:
  • Promise 的状态就是实例对象中的一个属性( PromiseState )
  • 共有三种状态: pending 未决定的 resolved / fullfilled 成功 rejected 失败
    • 状态只能由 pending 变为 resolved
    • 状态只能由 pending 变为 rejected
  • 说明 : 状态的改变只有这 2 种, 且一个 promise 对象的状态只能改变一次
    • 无论变为成功还是失败 , 都会有一个结果数据
    • 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

Promise 对象的值

  • 实例对象中的另一个属性『PromiseResult』
  • 保存着异步任务『成功/失败』的结果
  • resolve
  • reject

Promise 的工作流程

1654509929533

执行器

  • Promise 构造函数: Promise (executor);
    • (1) executor 函数:执行器( resolve, reject) =>{ }
    • (2) resolve 函数:内部定义成功时我们调用的函数: (value) =>{ }
    • (3) reject 函数:内部定义失败时我们调用的函数 (reason) => { }
  • 说明: executor 称为执行器, 会在 Promise 内部立即同步调用,异步操作在执行器中执行

then 方法

  • Promise.prototype.then 方法 : (onResolved, onRejected) => {}
    • (1) onResolved 函数 : 成功的回调函数 (value) => {}
    • (2) onRejected 函数 : 失败的回调函数 (reason) => {}
    • 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调, 返回一个新的 promise 对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
  <script>
    //01 创建 Promise实例对象
    let p = new Promise((resolve, reject) => {
      //执行器 会在 Promise内部立即同步调用 ,异步操作在执行器中执行
      // resolve(123) //改为成功状态
      reject(456) //改为失败状态
    })

    //02 调用then方法
    //   then方法:指定用于得到成功回调或者失败回调,只有一个回调会被执行   返回一个新的promise对象
    p.then(
      (value) => {
        //成功时的回调,只能是成功状态执行
        console.log(value)
      },
      (reason) => {
        //失败时的回调,只能是失败状态执行
        console.log(reason) //456
      }
    )
  </script>
</body>

catch 方法

  • Promise.prototype.catch 方法 : (onRejected) => {}
  • (1) onRejected 函数 : 失败的回调函数 (reason) => {}
  • (2) 说明: then() 的语法糖 , 相当于 : then(undefined, onRejected)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <script>
    //01 创建 Promise实例对象
    let p = new Promise((resolve, reject) => {
      //执行器 会在 Promise内部立即同步调用 ,异步操作在执行器中执行
      //resolve(123) //成功
      reject(456) //失败
    })

    //02 调用then和catch方法
    //then方法:指定用于得到成功回调和得到失败回调,返回一个新的promise对象
    p.then((value) => {
      //成功时的回调,只能是成功状态执行
      console.log(value)
    }).catch((reason) => {
      //失败时的回调,只能是失败状态执行
      console.log(reason) // 456
    })
  </script>
</body>

resolve 方法

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

    • value: 成功的数据或 promise 对象
    • 说明: 返回一个成功 / 失败的 promise 对象

  • resolve 方法属于 Promise 构造函数的方法,不是 Promise 实例对象的方法

1
2
3
//01 调用Promise构造函数的resolve方法
let p1 = Promise.resolve(515)
console.log(p1) //fulfilled 515
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//如果传入的参数为非Promise类型的对象，则返回的结果为成功promise对象
//如果传入的参数为 Promise对象，则参数的结果决定了resolve 的结果
//  传入的参数状态为成功,则结果的状态为成功,值为成功的值
//  传入的参数状态为失败,则结果的状态为失败,值为错误对象
let p2 = Promise.resolve(
  new Promise((resolve, reject) => {
    // resolve(123)  //fulfilled 123
    reject('error') //rejected error
  })
)
p2.catch((reason) => {
  console.log(reason) //error   02
})
console.log(p2) //rejected error  01

reject 方法

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

    • reason: 失败的原因
    • 说明: 返回一个失败的 promise 对象

  • reject 方法属于 Promise 构造函数的方法,不是 Promise 实例对象的方法

1
2
3
//reject方法:返回一个失败的 promise对象,不管传入的参数是什么
let p1 = Promise.reject(123)
console.log(p1) //状态:rejected 值:123  返回的是一个失败状态的Promise实例对象
1
2
3
4
5
6
7
8
//若传入一个Promise对象对象
let p2 = Promise.reject(
  new Promise((resolve, reject) => {
    resolve('OK')
  })
)
//返回的是一个失败状态的 Promise 对象,值为传递进来的 Promise 实例对象
console.log(p2) //状态:rejected 值:传入的Promise实例对象,该对象的状态为 fulfilled ,值为 OK

all 方法

  • Promise.all 方法 : ( promises ) => {}
    • promises: 包含 n 个 promise 实例对象的数组
    • 说明: 返回一个新的 promise, 只有所有的 promise 实例对象的状态都是成功才是成功 , 只要有一个失败了就直接失败
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <script>
    //01 创建Promise实例对象
    let p1 = new Promise((resolve, reject) => {
      resolve('OK')
    })
    let p2 = Promise.resolve('Success')
    // let p3 = Promise.resolve("oh Yeah")
    let p3 = Promise.reject('error')
    let p4 = Promise.reject('err')

    //02 调用Promise的all方法
    //all方法:参数为数组,数组中的每一项为一个Promise实例对象
    //返回一个新的 promise 实例对象, 只有当所有的 promise 都是成功状态时才成功 , 只要有一个失败了就直接失败
    //成功的值为: 所有成功的 Promise 实例对象的值组成的数组
    //失败的值为: 失败的那个 Promise 实例对象失败的值,如果有多个失败的 promise,则值为数组最左边的失败的 promise 的值
    let result = Promise.all([p1, p2, p4, p3])
    console.log(result) // 状态:rejected 值: err
  </script>
</body>

race 方法

  • Promise.race 方法 : ( promises) => { }
    • promises: 包含 n 个 promise 实例对象的数组
    • 说明: 返回一个新的 promise 实例对象, 第一个完成的 promise 的结果状态就是最终的结果状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <script>
    //01 创建Promise实例对象
    let p1 = new Promise((resolve, reject) => {
      resolve('OK')
    })
    let p2 = Promise.resolve('Success')
    let p3 = Promise.resolve('oh Yeah')

    //02 调用race方法
    //race方法:
    //参数为一个数组,数组的每一项为Promise实例对象,返回一个promise
    //返回的promise对象的状态和值,由数组中最先改变状态的Promise实例对象决定
    //返回值是一个新的 promise, 值和状态就是第一个完成状态改变的promise实例对象的值和状态
    const result = Promise.race([p1, p2, p3]) //fulfilled OK
    console.log(result)
  </script>
</body>

Promise 关键问题

改变 Promise 实例对象的状态

  • 如何改变 promise 的状态
    • (1) resolve(value): 如果当前是 pending 就会变为 resolved
    • (2) reject(reason): 如果当前是 pending 就会变为 rejected
    • (3) 抛出异常 : 如果当前是 pending 就会变为 rejected
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  <script>
    let p = new Promise((resolve, reject) => {
      //1.resolve方法 //状态由 pending -> fulfilled(resolved)
      //resolve("OK") //{<fulfilled>: 'OK'}

      //2.reject方法 //状态由 pending -> rejected
      //reject('error')  //{<rejected>: 'error'}

      //3.抛出错误  //状态由 pending -> rejected
      throw 'error' //{<rejected>: 'error'}
    })
    console.log(p)
  </script>
</body>

Promise 指定多个 then 回调

  • 一个 promise 指定多个成功 / 失败回调函数 , 都会调用吗
    • 当 promise 改变为对应状态时都会调用
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
<body>
  <script>
    //01 创建Promise实例对象
    let p = new Promise((resolve, reject) => {
      //1.resolve方法 //状态由 pending -> fulfilled(resolved)
      resolve('OK') //{<fulfilled>: 'OK'}
      // reject("err")
    })

    //02 指定多个then回调
    //可以指定多个回调
    //只有当Promise实例对象的状态改变时,才会指定then方法中的回调,状态不改变不会执行
    //指定回调1
    p.then((value) => {
      console.log(value)
    }).catch(() => {
      console.log(123)
    })

    //指定回调2
    p.then((value) => {
      console.log(value)
    }).catch(() => {
      console.log(123)
    })
  </script>
</body>

改变状态和指定回调的顺序

  • 改变 promise 状态和指定回调函数谁先谁后
    • (1) 都有可能 , 正常情况下是先指定回调再改变状态 , 但也可以先改状态再指定回调
    • (2) 如何先改状态再指定回调
      • ① 在执行器中直接调用 resolve() / reject()
      • ② 延迟更长时间才调用 then()
    • (3) 什么时候才能得到数据
      • ① 如果先指定的回调 , 那当状态发生改变时 , 回调函数就会调用 , 得到数据
      • ② 如果先改变的状态 , 那当指定回调时 , 回调函数就会调用 , 得到数据
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <script>
    //1.当执行器中是同步任务时,会先改变状态,再指定回调
    //2.当执行器中是异步任务时,会先指定回调,再改变状态,改变状态后,再执行回调
    let p = new Promise((resolve, reject) => {
      resolve('OK')
    })
    //指定回调
    p.then((value) => {
      console.log(value)
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
  <script>
    //1.当执行器中是同步任务时,会先改变状态,再指定回调
    //2.当执行器中是异步任务时,会先指定回调,再改变状态,改变状态后,再执行回调
    let p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('OK')
        console.log('promise')
      }, 1000)
    })
    //指定回调
    p.then((value) => {
      console.log(value)
      console.log('then')
    })
  </script>
</body>

then 方法的返回值

  • promise.then() 返回的新 promise 实例对象的结果状态由什么决定 ?
    • (1) 简单表达 : 由 then() 指定的回调函数执行的结果决定
    • (2) 详细表达 :
      • ① 如果抛出异常 , 新 promise 变为 rejected , reason 为抛出的异常
      • ② 如果返回的是非 promise 的任意值 , 新 promise 变为 resolved, value 为返回的值
      • ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果
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
<body>
  <script>
    //01 创建Promise实例对象
    let p = new Promise((resolve, reject) => {
      resolve('OK')
    })

    //02 调用then方法
    //then方法的返回值 返回一个新的Promise实例对象
    let result = p.then((value) => {
      //1.不写return语句
      //默认返回一个成功的Promise实例对象 值为undefined
      // console.log(value);

      //2.return一个非Promise类型的对象
      //返回的是一个成功的Promise实例对象,值为return的值
      // return 510

      //3.return一个Promise类型的对象
      //返回值是一个Promise实例对象,状态和值就是return的Promise对象的状态和值
      return new Promise((resolve, reject) => {
        resolve(456)
      })
    })
    console.log(result)
  </script>
</body>

then 方法的链式调用

  • promise 如何串连多个操作任务
    • (1) promise 的 then() 返回一个新的 promise, 可以写成 then() 的链式调用
    • (2) 通过 then 的链式调用串连多个同步 / 异步任务
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  <script>
    //01 创建Promise实例对象
    let p = new Promise((resolve, reject) => {
      resolve('OK')
    })

    //02 调用then方法
    p.then((value) => {
      return new Promise((resolve, reject) => {
        resolve(456)
      })
    })
      .then((value) => {
        console.log(value) //456
      })
      .then((value) => {
        console.log(value) // undefined 因为上一个 then 方法的返回值是一个非promise类型的成功 promise 实例对象,值为 undefined
      })
  </script>
</body>

异常穿透

  • promise 异常传透
    • (1) 当使用 promise 的 then 链式调用时 , 可以在最后指定失败的回调 ,
    • (2) 前面任何操作出了异常 , 都会传到最后失败的回调中处理
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
<body>
  <script>
    //01 创建Promise实例对象
    let p = new Promise((resolve, reject) => {
      resolve('OK')
      // reject("err")
    })

    //02 调用then方法
    p.then((value) => {
      return new Promise((resolve, reject) => {
        resolve(123)
      })
    })
      .then((value) => {
        throw '出错啦~'
      })
      .then((value) => {
        console.log(value)
      })
      .catch((reason) => {
        console.log(reason)
      })
  </script>
</body>

中断 Promise 链

  • 有且只有一种方法 返回一个未定状态的 Promise 实例对象
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
<body>
  <script>
    ///01 创建Promise实例对象
    let p = new Promise((resolve, reject) => {
      resolve('OK')
    })

    //02 调用then方法
    p.then((value) => {
      return new Promise((resolve, reject) => {
        resolve(123)
      })
    })
      .then((value) => {
        console.log(value) // 123 后面的 then 不再执行
        //中断Promise链 有且只有一种方法 返回一个未定状态的Promise实例对象
        return new Promise(() => {})
      })
      .then((value) => {
        console.log(456)
      })
      .catch((reason) => {
        console.log('error')
      })
  </script>
</body>

Promise 自定义封装

搭建初始结构

    1. 内置 Promise 实现的功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <script>
    //01 创建Promise实例对象
    let p = new Promise((resolve, reject) => {
      resolve('123')
    })

    //02 调用then方法
    p.then(
      (value) => {
        console.log(value)
      },
      (reason) => {
        console.log('error')
      }
    )
  </script>
</body>
    1. 创建promise.js文件,声明构造函数和添加 then 方法
1
2
3
4
5
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {}

resolve 和 reject 方法的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //02.1 定义resolve方法
  function resolve(data) {}

  //02.2 定义reject方法
  function reject(data) {}

  //02.3 同步调用执行器函数
  executor(resolve, reject)
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {}

resolve 和 reject 方法的实现

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
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //03.1 添加属性
  this.PromiseState = 'pending'
  this.PromiseResult = null

  //03.2 保存实例对象的this的值
  const that = this

  //02.1 定义resolve方法
  function resolve(data) {
    //03.3 修改对象的状态(PromiseState)
    that.PromiseState = 'fulfilled'
    //03.4 修改对象的结果值(PromiseResult)
    that.PromiseResult = data
  }

  //02.2 定义reject方法
  function reject(data) {
    //03.5 修改对象的状态(PromiseState)
    that.PromiseState = 'rejected'
    //03.6 修改对象的结果值(PromiseResult)
    that.PromiseResult = data
  }

  //02.3 同步调用执行器函数
  executor(resolve, reject)
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {}

处理抛出异常改变状态

  • 添加 try..catch.. 处理抛出异常
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
35
36
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //03.1 添加属性
  this.PromiseState = 'pending'
  this.PromiseResult = null

  //03.2 保存实例对象的this的值
  const that = this

  //02.1 定义resolve方法
  function resolve(data) {
    //03.3 修改对象的状态(PromiseState)
    that.PromiseState = 'fulfilled'
    //03.4 修改对象的结果值(PromiseResult)
    that.PromiseResult = data
  }

  //02.2 定义reject方法
  function reject(data) {
    //03.5 修改对象的状态(PromiseState)
    that.PromiseState = 'rejected'
    //03.6 修改对象的结果值(PromiseResult)
    that.PromiseResult = data
  }

  //04.1 添加 try..catch.. 处理抛出异常
  try {
    //02.3 同步调用执行器函数
    executor(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {}

Promise 的状态只能改变一次

  • 在 resolve 和 reject 方法中判断状态是否等于 pending,如果不是 pending 状态,直接结束方法的执行
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
35
36
37
38
39
40
41
42
43
44
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //03.1 添加属性
  this.PromiseState = 'pending'
  this.PromiseResult = null

  //03.2 保存实例对象的this的值
  const that = this

  //02.1 定义resolve方法
  function resolve(data) {
    //05.1 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.3 修改对象的状态(PromiseState)
    that.PromiseState = 'fulfilled'
    //03.4 修改对象的结果值(PromiseResult)
    that.PromiseResult = data
  }

  //02.2 定义reject方法
  function reject(data) {
    //05.2 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.5 修改对象的状态(PromiseState)
    that.PromiseState = 'rejected'
    //03.6 修改对象的结果值(PromiseResult)
    that.PromiseResult = data
  }

  //04.1 添加 try..catch.. 处理抛出异常
  try {
    //02.3 同步调用执行器函数
    executor(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {}

添加 then 方法执行回调

  • 判断状态是否等于 fulfilled 和 rejected,并分别调用传入 then 方法的两个回调
1
2
3
4
5
6
7
8
9
10
11
//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //06.1 调用then方法成功时的回调函数
  if (this.PromiseState === 'fulfilled') {
    onResolved(this.PromiseResult)
  }
  //06.2 调用then方法失败时的回调函数
  if (this.PromiseState === 'rejected') {
    onRejected(this.PromiseResult)
  }
}

异步任务回调的执行

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //03.1 添加属性
  this.PromiseState = 'pending'
  this.PromiseResult = null

  //03.2 保存实例对象的this的值
  const that = this

  //07.1 声明一个属性,用于存储then方法成功和失败的回调
  this.callback = {}

  //02.1 定义resolve方法
  function resolve(data) {
    //05.1 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.3 修改对象的状态(PromiseState)
    that.PromiseState = 'fulfilled'
    //03.4 修改对象的结果值(PromiseResult)
    that.PromiseResult = data

    //07.4 调用成功的回调
    if (that.callback.onResolved) {
      that.callback.onResolved(data)
    }
  }

  //02.2 定义reject方法
  function reject(data) {
    //05.2 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.5 修改对象的状态(PromiseState)
    that.PromiseState = 'rejected'
    //03.6 修改对象的结果值(PromiseResult)
    that.PromiseResult = data

    //07.5 调用失败的回调
    if (that.callback.onRejected) {
      that.callback.onRejected(data)
    }
  }

  //04.1 添加 try..catch.. 处理抛出异常
  try {
    //02.3 同步调用执行器函数
    executor(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //06.1 调用then方法成功时的回调函数
  if (this.PromiseState === 'fulfilled') {
    onResolved(this.PromiseResult)
  }
  //06.2 调用then方法失败时的回调函数
  if (this.PromiseState === 'rejected') {
    onRejected(this.PromiseResult)
  }
  //07.2 判断pending状态
  if (this.PromiseState === 'pending') {
    //07.3 保存回调函数
    this.callback = {
      onResolved,
      onRejected,
    }
  }
}

指定多个回调的实现

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //03.1 添加属性
  this.PromiseState = 'pending'
  this.PromiseResult = null

  //03.2 保存实例对象的this的值
  const that = this

  //07.1 声明一个属性,用于存储then方法成功和失败的回调
  //08.1 将callback的类型改为一个数组
  this.callbacks = []

  //02.1 定义resolve方法
  function resolve(data) {
    //05.1 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.3 修改对象的状态(PromiseState)
    that.PromiseState = 'fulfilled'
    //03.4 修改对象的结果值(PromiseResult)
    that.PromiseResult = data

    //07.4 调用成功的回调
    //08.3 遍历数组,调用成功的回调
    that.callbacks.forEach((item) => {
      item.onResolved(data)
    })
  }

  //02.2 定义reject方法
  function reject(data) {
    //05.2 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.5 修改对象的状态(PromiseState)
    that.PromiseState = 'rejected'
    //03.6 修改对象的结果值(PromiseResult)
    that.PromiseResult = data

    //07.5 调用失败的回调
    //08.4 遍历数组,调用失败的回调
    that.callbacks.forEach((item) => {
      item.onRejected(data)
    })
  }

  //04.1 添加 try..catch.. 处理抛出异常
  try {
    //02.3 同步调用执行器函数
    executor(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //06.1 调用then方法成功时的回调函数
  if (this.PromiseState === 'fulfilled') {
    onResolved(this.PromiseResult)
  }
  //06.2 调用then方法失败时的回调函数
  if (this.PromiseState === 'rejected') {
    onRejected(this.PromiseResult)
  }
  //07.2 判断pending状态
  if (this.PromiseState === 'pending') {
    //07.3 保存回调函数
    //08.2 将回调函数添加到数组中
    this.callbacks.push({
      onResolved,
      onRejected,
    })
  }
}

同步状态修改 then 返回结果

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
35
36
37
38
39
40
41
42
43
44
//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //09.1 return一个Promise实例对象
  return new Promise((resolve, reject) => {
    //06.1 调用then方法成功时的回调函数
    if (this.PromiseState === 'fulfilled') {
      //09.6 添加try..catch..处理抛出异常
      try {
        //09.2 获取回调函数的执行结果
        let result = onResolved(this.PromiseResult)
        //09.3 判断结果是否是Promise的实例对象
        if (result instanceof Promise) {
          //09.5 如果是Promise类型的对象
          result.then(
            (v) => {
              resolve(v)
            },
            (r) => {
              reject(r)
            }
          )
        } else {
          //09.4 结果的状态为成功
          resolve(result)
        }
      } catch (e) {
        reject(e)
      }
    }
    //06.2 调用then方法失败时的回调函数
    if (this.PromiseState === 'rejected') {
      onRejected(this.PromiseResult)
    }
    //07.2 判断pending状态
    if (this.PromiseState === 'pending') {
      //07.3 保存回调函数
      //08.2 将回调函数添加到数组中
      this.callbacks.push({
        onResolved,
        onRejected,
      })
    }
  })
}

异步状态修改 then 返回结果

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //10.1 获取到this的值
  const self = this

  //09.1 return一个Promise实例对象
  return new Promise((resolve, reject) => {
    //06.1 调用then方法成功时的回调函数
    if (this.PromiseState === 'fulfilled') {
      //09.6 添加try..catch..处理抛出异常
      try {
        //09.2 获取回调函数的执行结果
        let result = onResolved(this.PromiseResult)
        //09.3 判断结果是否是Promise的实例对象
        if (result instanceof Promise) {
          //09.5 如果是Promise类型的对象
          result.then(
            (v) => {
              resolve(v)
            },
            (r) => {
              reject(r)
            }
          )
        } else {
          //09.4 结果的状态为成功
          resolve(result)
        }
      } catch (e) {
        reject(e)
      }
    }
    //06.2 调用then方法失败时的回调函数
    if (this.PromiseState === 'rejected') {
      onRejected(this.PromiseResult)
    }
    //07.2 判断pending状态
    if (this.PromiseState === 'pending') {
      //07.3 保存回调函数
      //08.2 将回调函数添加到数组中
      this.callbacks.push({
        onResolved: function () {
          //10.6 添加try..catch..处理抛出异常
          try {
            //10.2 执行成功的回调,获取执行结果
            let result = onResolved(self.PromiseResult)
            //10.3 判断结果是否是Promise的实例对象
            if (result instanceof Promise) {
              result.then(
                (v) => {
                  resolve(v)
                },
                (r) => {
                  reject(r)
                }
              )
            } else {
              resolve(result)
            }
          } catch (e) {
            reject(e)
          }
        },
        onRejected: function () {
          //10.7 添加try..catch..处理抛出异常
          try {
            //10.4 执行失败的回调,获取执行结果
            let result = onRejected(self.PromiseResult)
            //10.5 判断结果是否是Promise的实例对象
            if (result instanceof Promise) {
              result.then(
                (v) => {
                  resolve(v)
                },
                (r) => {
                  reject(r)
                }
              )
            } else {
              resolve(result)
            }
          } catch (e) {
            reject(e)
          }
        },
      })
    }
  })
}

then 方法的完善

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if (this.PromiseState === 'rejected') {
  //11.1 添加try..catch..处理抛出异常
  try {
    //11.2 获取函数执行的结果
    let result = onRejected(this.PromiseResult)
    //11.3 判断结果是否是Promise的实例对象
    if (result instanceof Promise) {
      result.then(
        (v) => {
          resolve(v)
        },
        (r) => {
          reject(r)
        }
      )
    } else {
      resolve(result)
    }
  } catch (e) {
    reject(e)
  }
}
  • 函数封装:
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //10.1 获取到this的值
  const self = this

  //09.1 return一个Promise实例对象
  return new Promise((resolve, reject) => {
    //11.4 函数封装
    function callback(type) {
      //09.6 添加try..catch..处理抛出异常
      try {
        //09.2 获取回调函数的执行结果
        let result = type(self.PromiseResult)
        //09.3 判断结果是否是Promise的实例对象
        if (result instanceof Promise) {
          //09.5 如果是Promise类型的对象
          result.then(
            (v) => {
              resolve(v)
            },
            (r) => {
              reject(r)
            }
          )
        } else {
          //09.4 结果的状态为成功
          resolve(result)
        }
      } catch (e) {
        reject(e)
      }
    }

    //06.1 调用then方法成功时的回调函数
    if (this.PromiseState === 'fulfilled') {
      callback(onResolved) //11.5 调用函数
    }
    //06.2 调用then方法失败时的回调函数
    if (this.PromiseState === 'rejected') {
      callback(onRejected) //11.6 调用函数
    }
    //07.2 判断pending状态
    if (this.PromiseState === 'pending') {
      //07.3 保存回调函数
      //08.2 将回调函数添加到数组中
      this.callbacks.push({
        onResolved: function () {
          callback(onResolved) //11.7 调用函数
        },
        onRejected: function () {
          callback(onRejected) //11.8 调用函数
        },
      })
    }
  })
}

catch/异常穿透/值传递

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //10.1 获取到this的值
  const self = this

  //12.2 判断回调函数参数
  if (typeof onRejected !== 'function') {
    onRejected = (reason) => {
      throw reason
    }
  }
  //12.3 判断回调函数参数
  if (typeof onResolved !== 'function') {
    onResolved = (value) => {
      return value
    }
  }

  //09.1 return一个Promise实例对象
  return new Promise((resolve, reject) => {
    //11.4 函数封装
    function callback(type) {
      //09.6 添加try..catch..处理抛出异常
      try {
        //09.2 获取回调函数的执行结果
        let result = type(self.PromiseResult)
        //09.3 判断结果是否是Promise的实例对象
        if (result instanceof Promise) {
          //09.5 如果是Promise类型的对象
          result.then(
            (v) => {
              resolve(v)
            },
            (r) => {
              reject(r)
            }
          )
        } else {
          //09.4 结果的状态为成功
          resolve(result)
        }
      } catch (e) {
        reject(e)
      }
    }

    //06.1 调用then方法成功时的回调函数
    if (this.PromiseState === 'fulfilled') {
      callback(onResolved)
    }
    //06.2 调用then方法失败时的回调函数
    if (this.PromiseState === 'rejected') {
      callback(onRejected)
    }
    //07.2 判断pending状态
    if (this.PromiseState === 'pending') {
      //07.3 保存回调函数
      //08.2 将回调函数添加到数组中
      this.callbacks.push({
        onResolved: function () {
          callback(onResolved)
        },
        onRejected: function () {
          callback(onRejected)
        },
      })
    }
  })
}

//12.1 添加catch方法
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected)
}

添加 resolve 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//13.1 添加resolve方法
Promise.resolve = function (value) {
  //返回Promise对象
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      value.then(
        (v) => {
          resolve(v)
        },
        (r) => {
          reject(r)
        }
      )
    } else {
      //状态设置为成功
      resolve(value)
    }
  })
}

添加 reject 方法

1
2
3
4
5
6
7
//14.1 添加reject方法
Promise.reject = function (reason) {
  //返回Promise对象
  return new Promise((resolve, reject) => {
    reject(reason)
  })
}
  • 以下用于测试:
1
2
3
4
5
6
7
8
const p1 = Promise.reject('error')
const p2 = Promise.reject(
  new Promise((resolve, reject) => {
    resolve('OK')
  })
)
console.log(p1)
console.log(p2)

添加 all 方法

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
//15.1 添加all方法
Promise.all = function (promises) {
  return new Promise((resolve, reject) => {
    //声明变量
    let count = 0
    let arr = []
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          //得知对象的状态是成功
          //每个promise对象都成功
          count++
          //将当前promise对象成功的结果存入到数组中
          arr[i] = v
          //判断
          if (count === promises.length) {
            //修改状态
            resolve(arr)
          }
        },
        (r) => {
          reject(r)
        }
      )
    }
  })
}

添加 race 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//16.1 添加race方法
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          //修改返回对象的状态为「 成功」
          resolve(v)
        },
        (r) => {
          //修改返回对象的状态为「 失败」
          reject(r)
        }
      )
    }
  })
}
  • 以下用于测试:
1
2
3
4
5
6
7
8
9
10
11
let p1 = new Promise((resolve, reject) => {
  // resolve("OK")
  reject('error')
})
let p2 = Promise.resolve('Success')
let p3 = Promise.resolve('Oh Yeah')

//调用race方法
let result = Promise.race([p1, p2, p3])

console.log(result)

then 方法回调的异步执行

  • 添加了定时器
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
//01.1 声明构造函数 形参executor:构造器函数
function Promise(executor) {
  //03.1 添加属性
  this.PromiseState = 'pending'
  this.PromiseResult = null

  //03.2 保存实例对象的this的值
  const that = this

  //07.1 声明一个属性,用于存储then方法成功和失败的回调
  //08.1 将callback的类型改为一个数组
  this.callbacks = []

  //02.1 定义resolve方法
  function resolve(data) {
    //05.1 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.3 修改对象的状态(PromiseState)
    that.PromiseState = 'fulfilled'
    //03.4 修改对象的结果值(PromiseResult)
    that.PromiseResult = data

    //07.4 调用成功的回调
    //08.3 遍历数组,调用成功的回调
    //17.1 添加定时器
    setTimeout(() => {
      that.callbacks.forEach((item) => {
        item.onResolved(data)
      })
    })
  }

  //02.2 定义reject方法
  function reject(data) {
    //05.2 判断状态是否等于pending  Promise的状态只能改变一次
    if (that.PromiseState !== 'pending') {
      return
    }
    //03.5 修改对象的状态(PromiseState)
    that.PromiseState = 'rejected'
    //03.6 修改对象的结果值(PromiseResult)
    that.PromiseResult = data

    //07.5 调用失败的回调
    //08.4 遍历数组,调用失败的回调
    //17.2 添加定时器
    setTimeout(() => {
      that.callbacks.forEach((item) => {
        item.onRejected(data)
      })
    })
  }

  //04.1 添加 try..catch.. 处理抛出异常
  try {
    //02.3 同步调用执行器函数
    executor(resolve, reject)
  } catch (e) {
    reject(e)
  }
}

//01.2 添加then方法 两个形参:都是函数类型
Promise.prototype.then = function (onResolved, onRejected) {
  //10.1 获取到this的值
  const self = this

  //12.2 判断回调函数参数
  if (typeof onRejected !== 'function') {
    setTimeout(() => {
      onRejected = (reason) => {
        throw reason
      }
    })
  }
  //12.3 判断回调函数参数
  if (typeof onResolved !== 'function') {
    setTimeout(() => {
      onResolved = (value) => {
        return value
      }
    })
  }

  //09.1 return一个Promise实例对象
  return new Promise((resolve, reject) => {
    //11.4 函数封装
    function callback(type) {
      //09.6 添加try..catch..处理抛出异常
      try {
        //09.2 获取回调函数的执行结果
        let result = type(self.PromiseResult)
        //09.3 判断结果是否是Promise的实例对象
        if (result instanceof Promise) {
          //09.5 如果是Promise类型的对象
          result.then(
            (v) => {
              resolve(v)
            },
            (r) => {
              reject(r)
            }
          )
        } else {
          //09.4 结果的状态为成功
          resolve(result)
        }
      } catch (e) {
        reject(e)
      }
    }

    //06.1 调用then方法成功时的回调函数
    if (this.PromiseState === 'fulfilled') {
      //17.3 添加定时器
      setTimeout(() => {
        callback(onResolved)
      })
    }
    //06.2 调用then方法失败时的回调函数
    if (this.PromiseState === 'rejected') {
      //17.4 添加定时器
      setTimeout(() => {
        callback(onRejected)
      })
    }
    //07.2 判断pending状态
    if (this.PromiseState === 'pending') {
      //07.3 保存回调函数
      //08.2 将回调函数添加到数组中
      this.callbacks.push({
        onResolved: function () {
          callback(onResolved)
        },
        onRejected: function () {
          callback(onRejected)
        },
      })
    }
  })
}

//12.1 添加catch方法
Promise.prototype.catch = function (onRejected) {
  return this.then(undefined, onRejected)
}

//13.1 添加resolve方法
Promise.resolve = function (value) {
  //返回Promise对象
  return new Promise((resolve, reject) => {
    if (value instanceof Promise) {
      value.then(
        (v) => {
          resolve(v)
        },
        (r) => {
          reject(r)
        }
      )
    } else {
      //状态设置为成功
      resolve(value)
    }
  })
}

//14.1 添加reject方法
Promise.reject = function (reason) {
  //返回Promise对象
  return new Promise((resolve, reject) => {
    reject(reason)
  })
}

//15.1 添加all方法
Promise.all = function (promises) {
  return new Promise((resolve, reject) => {
    //声明变量
    let count = 0
    let arr = []
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          //得知对象的状态是成功
          //每个promise对象都成功
          count++
          //将当前promise对象成功的结果存入到数组中
          arr[i] = v
          //判断
          if (count === promises.length) {
            //修改状态
            resolve(arr)
          }
        },
        (r) => {
          reject(r)
        }
      )
    }
  })
}

//16.1 添加race方法
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(
        (v) => {
          //修改返回对象的状态为「 成功」
          resolve(v)
        },
        (r) => {
          //修改返回对象的状态为「 失败」
          reject(r)
        }
      )
    }
  })
}

class 类的封装

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
class Promise {
  //构造方法
  constructor(executor) {
    //03.1 添加属性
    this.PromiseState = 'pending'
    this.PromiseResult = null

    //03.2 保存实例对象的this的值
    const that = this

    //07.1 声明一个属性,用于存储then方法成功和失败的回调
    //08.1 将callback的类型改为一个数组
    this.callbacks = []

    //02.1 定义resolve方法
    function resolve(data) {
      //05.1 判断状态是否等于pending  Promise的状态只能改变一次
      if (that.PromiseState !== 'pending') {
        return
      }
      //03.3 修改对象的状态(PromiseState)
      that.PromiseState = 'fulfilled'
      //03.4 修改对象的结果值(PromiseResult)
      that.PromiseResult = data

      //07.4 调用成功的回调
      //08.3 遍历数组,调用成功的回调
      //17.1 添加定时器
      setTimeout(() => {
        that.callbacks.forEach((item) => {
          item.onResolved(data)
        })
      })
    }

    //02.2 定义reject方法
    function reject(data) {
      //05.2 判断状态是否等于pending  Promise的状态只能改变一次
      if (that.PromiseState !== 'pending') {
        return
      }
      //03.5 修改对象的状态(PromiseState)
      that.PromiseState = 'rejected'
      //03.6 修改对象的结果值(PromiseResult)
      that.PromiseResult = data

      //07.5 调用失败的回调
      //08.4 遍历数组,调用失败的回调
      //17.2 添加定时器
      setTimeout(() => {
        that.callbacks.forEach((item) => {
          item.onRejected(data)
        })
      })
    }

    //04.1 添加 try..catch.. 处理抛出异常
    try {
      //02.3 同步调用执行器函数
      executor(resolve, reject)
    } catch (e) {
      reject(e)
    }
  }

  //then方法封装
  then(onResolved, onRejected) {
    //10.1 获取到this的值
    const self = this

    //12.2 判断回调函数参数
    if (typeof onRejected !== 'function') {
      setTimeout(() => {
        onRejected = (reason) => {
          throw reason
        }
      })
    }
    //12.3 判断回调函数参数
    if (typeof onResolved !== 'function') {
      setTimeout(() => {
        onResolved = (value) => {
          return value
        }
      })
    }

    //09.1 return一个Promise实例对象
    return new Promise((resolve, reject) => {
      //11.4 函数封装
      function callback(type) {
        //09.6 添加try..catch..处理抛出异常
        try {
          //09.2 获取回调函数的执行结果
          let result = type(self.PromiseResult)
          //09.3 判断结果是否是Promise的实例对象
          if (result instanceof Promise) {
            //09.5 如果是Promise类型的对象
            result.then(
              (v) => {
                resolve(v)
              },
              (r) => {
                reject(r)
              }
            )
          } else {
            //09.4 结果的状态为成功
            resolve(result)
          }
        } catch (e) {
          reject(e)
        }
      }

      //06.1 调用then方法成功时的回调函数
      if (this.PromiseState === 'fulfilled') {
        //17.3 添加定时器
        setTimeout(() => {
          callback(onResolved)
        })
      }
      //06.2 调用then方法失败时的回调函数
      if (this.PromiseState === 'rejected') {
        //17.4 添加定时器
        setTimeout(() => {
          callback(onRejected)
        })
      }
      //07.2 判断pending状态
      if (this.PromiseState === 'pending') {
        //07.3 保存回调函数
        //08.2 将回调函数添加到数组中
        this.callbacks.push({
          onResolved: function () {
            callback(onResolved)
          },
          onRejected: function () {
            callback(onRejected)
          },
        })
      }
    })
  }

  //catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }

  //resolve方法
  static resolve(value) {
    //返回Promise对象
    return new Promise((resolve, reject) => {
      if (value instanceof Promise) {
        value.then(
          (v) => {
            resolve(v)
          },
          (r) => {
            reject(r)
          }
        )
      } else {
        //状态设置为成功
        resolve(value)
      }
    })
  }

  //reject方法
  static reject = function (reason) {
    //返回Promise对象
    return new Promise((resolve, reject) => {
      reject(reason)
    })
  }

  //all方法
  static all(promises) {
    return new Promise((resolve, reject) => {
      //声明变量
      let count = 0
      let arr = []
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (v) => {
            //得知对象的状态是成功
            //每个promise对象都成功
            count++
            //将当前promise对象成功的结果存入到数组中
            arr[i] = v
            //判断
            if (count === promises.length) {
              //修改状态
              resolve(arr)
            }
          },
          (r) => {
            reject(r)
          }
        )
      }
    })
  }

  //race方法
  static race(promises) {
    return new Promise((resolve, reject) => {
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          (v) => {
            //修改返回对象的状态为「 成功」
            resolve(v)
          },
          (r) => {
            //修改返回对象的状态为「 失败」
            reject(r)
          }
        )
      }
    })
  }
}

async 与 await

async

  • 会将函数的返回值包装成一个 promise 实例对象,状态和值由函数的返回值决定
  • promise 对象的结果由 async 函数执行的返回值决定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <script>
    async function main() {
      //01 如果返回值是一个非Promise类型的数据,则返回的是一个成功的Promise,值为返回的值
      // return 520

      //02 如果返回的是一个Promise对象,则状态和值有返回的Promise决定
      // return new Promise((resolve,rejece) => {
      //   // resolve("123")
      //   rejece("error")
      // })

      //03 抛出异常 ,则返回的是一个失败的Promise,值为抛出的异常值
      throw 'error'
    }
    let result = main()
    console.log(result) // Promise {<rejected>: 'error'}
  </script>
</body>

await

  • await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
    • await 右侧的表达式如果是一个成功状态的 promise 实例对象, 则 await 返回的就是 promise 成功时的值
    • await 右侧的表达式如果是一个失败状态的 promise 实例对象, 则 await 返回的就是 promise 失败时的值
  • 如果表达式是其它值, 直接将此值作为 await 的返回值
  • await 必须写在 async 函数中, 但 async 函数中可以没有 await
  • 如果 await 的 promise 失败了, 就会抛出异常, 需要通过try...catch 捕获处理
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
<body>
  <script>
    async function main() {
      let p = new Promise((resolve, reject) => {
        // resolve(123)
        reject('error')
      })

      //01 await右边是Promise时,
      //  如果是成功的Promise,则返回的是成功时的值
      //  如果是失败的Promise,则直接抛出异常
      // let res = await p;
      // console.log(res);

      //02 await右边为其他类型的数据时,直接返回该数据
      // let res = await 20;
      // console.log(res);

      //03 await右边为失败的Promise时,直接抛出异常
      //  通过try..catch..捕获异常  e为失败的Promise的值
      try {
        let res = await p
      } catch (e) {
        console.log(e)
      }
    }
    main()
  </script>
</body>

async 和 await 的结合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 需求:读取 ./resource文件夹下的  1.txt  2.txt 3.txt 这三个文件的内容
 */
const fs = require('fs')

//回调函数的方式
fs.readFile('./resource/1.txt', (err, data1) => {
  if (err) throw err
  fs.readFile('./resource/2.txt', (err, data2) => {
    if (err) throw err
    fs.readFile('./resource/3.txt', (err, data3) => {
      if (err) throw err
      console.log(data1 + data2 + data3)
    })
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 需求:读取 ./resource 文件夹下的  1.txt  2.txt 3.txt 这三个文件的内容
 */

const fs = require('fs')
const util = require('util')
const mineReadFile = util.promisify(fs.readFile)

//async 与 await
async function main() {
  try {
    //读取第一个文件的内容
    let data1 = await mineReadFile('./resource/12.txt')
    let data2 = await mineReadFile('./resource/2.txt')
    let data3 = await mineReadFile('./resource/3.txt')
    console.log(data1 + data2 + data3) //你好啊,李银河
  } catch (e) {
    console.log(e.code)
  }
}
main()

async 和 await 发起 ajax 请求

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
35
36
<body>
  <button id="btn">点击获取段子</button>
  <script>
    // 封装一个方法,用于发起 ajax 请求
    function sendAJAX(url) {
      return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.responseType = 'json'
        xhr.open('GET', url)
        xhr.send()
        //处理结果
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            //判断成功
            if (xhr.status >= 200 && xhr.status < 300) {
              //成功的结果
              resolve(xhr.response)
            } else {
              reject(xhr.status)
            }
          }
        }
      })
    }

    //段子接口地址 https://api.apiopen.top/getJoke
    let btn = document.querySelector('#btn')

    btn.addEventListener('click', async function () {
      // 获取段子信息
      let duanzi = await sendAJAX('https://api.github.com/search/users?q=jquery')
      // 因为 await 右边的函数调用后返回的是一个成功的Promise实例对象,直接获取到了该Promise实例对象的值
      console.log(duanzi)
    })
  </script>
</body>