uploadhub的技术博客
uploadhub
2022-03-09
目录

Promise篇

# Promise学习笔记

# 一、Promise 的理解和使用

# 1.1 Promise是什么

  1. 抽象表达:
  • Promise 是一门新的技术(ES6 规范)
  • Promise 是 JS 中进行异步编程的新解决方案 备注：旧方案是单纯使用回调函数
  1. 具体表达:
  • 从语法上来说: Promise 是一个构造函数
  • 从功能上来说: Promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

# 1.2 Promise的状态和值

Promise实例对象含有一个内置属性 『PromiseState』

  • pending 未决定的
  • resolved / fullfilled 成功
  • rejected 失败

该属性负责存放Promise的状态，其初始值为pending，即待定状态，Promise状态的改变会有两种可能性，即：

  1. pending变为resolved
  2. pending变为rejected

说明：

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

实例对象中的另一个内置属性 『PromiseResult』，该属性负责存放Promise对象的值 保存着异步任务『成功/失败』的结果

  • resolve
  • reject

# 1.3 Promise的基本流程

# 1.4 Promise的基本使用

①基本编码流程

​ 注意：setTimeout函数可执行异步任务，无论延时时间是否等于0

<script>
    // 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)
        }
    )
</script>
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

②使用 promise 封装基于定时器的异步

<script>
    function doDelay(time) {
        // 1. 创建 promise 对象
        return new Promise((resolve, reject) => {
            // 2. 启动异步任务
            console.log('启动异步任务')
            setTimeout(() => {
                console.log('延迟任务开始执行...')
                const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
                if (time %2=== 1) { // 成功了
                    // 3. 1. 如果成功了, 调用 resolve()并传入成功的 value
                    resolve('成功的数据 ' + time)
                } else { // 失败了
                    // 3.2. 如果失败了, 调用 reject()并传入失败的 reason
                    reject('失败的数据 ' + time)
                }
            }, time)
        })
    }

    const promise = doDelay(2000)
    promise.then(
        value => {
        console.log('成功的 value: ', value)
        },
        reason => {
        console.log('失败的 reason: ', reason)
        }
    )
</script>
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

③使用 promise 封装 ajax 异步请求

<script>
    /*
        可复用的发 ajax GET请求的函数
    */
    function sendAjax(url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.responseType='json';
            xhr.onreadystatechange = () => {
                if (xhr.readyState!==4) return
                const {status, response} = xhr
                // 请求成功, 调用 resolve(value)
                if (status>=200 && status<300) {
                	resolve(response)
                } else { 
                    // 请求失败, 调用 reject(reason)
                	reject(new Error('请求失败: status: ' + status))
        	}
    	}
    
    	xhr.open("GET", url)
    
    	xhr.send()
    })

    }
    promiseAjax('https://api.apiopen.top2/getJoke?page=1&count=2&type=video')
    .then(data => {
        console.log('显示成功数据', data)
    },error => {
        alert(error.message)
    })
</script>
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

# 二、为什么要用 Promise?

# 2.1 指定回调函数的方式更加灵活

  1. 旧的: 必须在启动异步任务前指定

  2. promise: 启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数

(甚至可以在异步任务结束后指定一或多个)

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

  1. 什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件

  2. 回调地狱的缺点? 不便于阅读 不便于异常处理

  3. 解决方案? promise 链式调用

  4. 终极解决方案?

    async/await组合使用

举例，对比同时读取三个文件内容并打印时，纯回调函数处理与async/await处理不同之处：

const fs = require('fs');
const util = require('util');
//promisify方法可以将老式的Error first callback函数转换为Promise对象
const mineReadFile = util.promisify(fs.readFile);

//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });

//async 与 await
async function main(){
    try{
        //读取第一个文件的内容
        let data1 = await mineReadFile('./resource/1x.html');
        let data2 = await mineReadFile('./resource/2.html');
        let data3 = await mineReadFile('./resource/3.html');
        console.log(data1 + data2 + data3);
    }catch(e){
        console.log(e.code);
    }
}

main();
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

可以发现async/await的解决方案易读很多，且出错抛异常只需在最外层套一次try/catch即可，而不像回调地狱每一层都要编写出错时的处理代码。

# 三、使用 Promise的API

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

​ (1) executor 函数: 执行器 (resolve, reject) => {} ​ (2) resolve 函数: 内部定义成功时我们调用的函数 value => {} ​ (3) reject 函数: 内部定义失败时我们调用的函数 reason => {}

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

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

​ (1) onResolved 函数: 成功的回调函数 (value) => {} ​ (2) onRejected 函数: 失败的回调函数 (reason) => {}

​ 说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调，返回一个新的 promise 对象

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

​ (1) onRejected 函数: 失败的回调函数 (reason) => {}

​ 说明: then()的语法糖, 相当于: then(undefined, onRejected)

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

​ (1) value: 成功的数据或 promise 对象

​ 说明: 返回一个成功/失败的 promise 对象

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

​ (1) reason: 失败的原因

​ 说明: 返回一个失败的 promise 对象

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

​ (1) promises: 包含 n 个 promise 的数组

​ 说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

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

​ (1) promises: 包含 n 个 promise 的数组

​ 说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

使用举例：

<script>
    const p1 = Promise.resolve(1)
    const p2 = Promise.resolve(Promise.resolve(3))
    const p3 = Promise.resolve(Promise.reject(5))
    const p4 = Promise.reject(7)
    const p5 = new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Date.now()%2===0) {
                resolve(1)
            } else {
                reject(2)
            }
        }, 100);
    })
    const pAll = Promise.all([p1, p2, p5])
    pAll.then(
    	values => {console.log('all 成功了', values)},
    	reason => {console.log('all 失败了', reason)}
    )
    // const pRace = Promise.race([p5, p4, p1])
    const pRace = Promise.race([p5, p1, p4])
    pRace.then(
    	value => {console.log('race 成功了', value)},
    	reason => {console.log('race 失败了', reason)}
    )
</script>
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

# 四、Promise 的几个关键问题

# 4.1 如何改变 promise 的状态?

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

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

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

<script>
        let p = new Promise((resolve, reject) => {
            // resolve('OK');
        });

        ///指定回调 - 1
        p.then(value => {
            console.log(value);
        });

        //指定回调 - 2
        p.then(value => {
            alert(value);
        });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调

(2) 如何先改状态再指定回调? ① 在执行器中直接调用 resolve()/reject() ② 延迟更长时间才调用 then()

(3) 什么时候才能得到数据? ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据 ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

# 4.4 promise.then()返回的新 promise 的结果状态由什么决定?

(1) 简单表达: 由 then()指定的回调函数执行的结果决定

(2) 详细表达: ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常 ② 如果返回的是非promise的任意值, 新promise变为resolved, value为返回的值 ③ 如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果

# 4.5 promise 如何串连多个操作任务?

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

# 4.6 promise 异常传透

  1. 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
  2. 前面任何操作出了异常, 都会传到最后失败的回调中处理

# 4.7 如何中断 promise 链?

需求：当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数

办法：在回调函数中返回一个 pending 状态的 promise 对象

解释：因为此时promise对象的状态一直是pending状态，状态没有被改变，故后续链式调用的then方法都不会被执行， 参考4.2小节

p.then(value => {
	console.log(111);
    //有且只有一种方法
    return new Promise(()=>{});
}).then(value => {
	console.log(222);
}).then(value => {
	console.log(333);
});
1
2
3
4
5
6
7
8
9

# 五、Promise自定义封装

总目标：仿写实现Promise所有的API，所有功能要做到一模一样

# 5.1 初始结构搭建

index页面引用自定义的promise.js，此时new出来的Promise对象即为自定义的Promise函数对象；对比内置的Promise，自定义的Promise对象需传入一个执行器函数excutor作为形参，then方法需传入两个形参函数onResolved和onRejected，实例对象使用then方法时只需箭头函数传参操作即可。

​ index.html

<head>
    <title>Promise自定义封装</title>
    <script src="./promise.js"></script>
</head>
<body>
    
    <script>
        let p=new Promise((resolve, reject) =>{
            resolve('OK');
        });

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

​ promise.js

function Promise(excutor) {

}

Promise.prototype.then=function(onResolved,onRejected) {

}
1
2
3
4
5
6
7

# 5.2 resolve和reject结构搭建

本小节突破点在于内置Promise的执行器函数在内部是同步调用的，所以我们只需在5.1小节的基础上，在自定义Promise函数内部调用一下excutor函数即为同步执行，但内置Promise在new出实例时，会传入两个形参resolve和reject，所以自定义Promise先改写成excutor(resolve,reject)。此时又出现了新问题，自定义Promise的函数作用域下并没有出现resolve和reject的声明，观察它们在内置Promise实例中的使用，可以发现这二者是作为函数被执行的，并且都接受一个实参的传入，所以我们在自定义Promise函数内部把他们声明成function，并传入一个形参data。

注1：excutor函数传入的参数名不一定非要是reject和resolve，前后声明调用的时候使用的名称保持一致即可，就算是声明成a和b都是可以的，但尽量遵守约定俗成的命名reject和resolve。

​ promise.js

function Promise(excutor) {

    //resolve函数
    function resolve(data){

    }
    //reject函数
    function reject(data){

    }

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

Promise.prototype.then=function(onResolved,onRejected) {

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 5.3 resolve和reject代码实现

本节关注实现resolve和reject函数的具体功能，这两个函数都要实现两个功能，一是修改对象的状态（修改实例对象属性PromiseState的值），二是修改对象的结果值（修改实例对象属性PromiseResult的值）。故首先要在自定义Promise内部声明两个属性PromiseState和PromiseResult，并指定默认值为pending和null。注意这里的this在自定义Promise函数作用域内部，故指向的就是自定义Promise函数本身。之后便可以在resolve和reject函数内部修改这两个属性，但这里不能直接用this，因为此时this在这两个函数的作用域内部，所以会指向的是全局对象window，所以会出现PromiseResult修改不成功的问题，解决方法就是在自定义Promise的函数内部声明一个_this变量保存指向自定义Promise的this值，然后用 _this变量来操作修改自定义Promise的内部属性PromiseResult。

​ promise.js

function Promise(excutor) {

    //添加属性并指定默认值
    this.PromiseState='pending';
    this.PromiseResult=null;

    //保存实例对象的this值
    const _this=this;

    //resolve函数
    function resolve(data){
        //1.修改对象的状态（PromiseState）
        _this.PromiseState='fulfilled';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;
    }
    //reject函数
    function reject(data){
        //1.修改对象的状态（PromiseState）
        _this.PromiseState='rejected';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;
    }

    //同步调用执行器函数
    excutor(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

# 5.4 throw抛出异常改变状态

throw抛出异常是继resolve和reject函数后的第三种可以改变Promise对象状态的途径，自定义Promise实现该功能，则需要通过try/catch代码实现，而内置Promise实例都是在执行器函数内部调用throw语句，故自定义Promise需将调用执行器函数excutor的语句用try/catch嵌套起来，且throw时的传递信息直接传给e这个形参，故在catch代码块中直接调用reject(e)改变Promise状态和结果值即可。

注：内置Promise实例打印出来的属性有两个中括号，仅表示这个属性是内置的，而无其他含义

image-20211215202341530

index.html

<script>
    let p=new Promise((resolve, reject) =>{
        //抛出异常
        throw 'error';
    });

	console.log(p);

</script>
1
2
3
4
5
6
7
8
9

promise.js

function Promise(excutor) {

    //添加属性并指定默认值
    this.PromiseState='pending';
    this.PromiseResult=null;

    //保存实例对象的this值
    const _this=this;

    //resolve函数
    function resolve(data){
        //1.修改对象的状态（PromiseState）
        _this.PromiseState='fulfilled';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;
    }
    //reject函数
    function reject(data){
        //1.修改对象的状态（PromiseState）
        _this.PromiseState='rejected';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;
    }

    try {
        //同步调用执行器函数
        excutor(resolve, reject);
    } catch (e) {
        //修改Promise对象的状态为失败
        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

# 5.5 Promise对象状态只能修改一次

实现功能：

自定义Promise对象状态只能由pending转为resolved或由pending转为rejected，没有其他情况，且只能修改一次。

解决思路：

从resolv和reject函数入手，在函数开头统一加个判断，如果Promise实例状态不为pending，则状态已被修改过，直接返回，不做其他处理。

promise.js

function Promise(excutor) {

    //添加属性并指定默认值
    this.PromiseState='pending';
    this.PromiseResult=null;

    //保存实例对象的this值
    const _this=this;

    //resolve函数
    function resolve(data){
        //判断状态，确保其只被修改过一次
        if(_this.PromiseState!='pending') return;

        //1.修改对象的状态（PromiseState）
        _this.PromiseState='fulfilled';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;
    }
    //reject函数
    function reject(data){
        //判断状态，确保其只被修改过一次
        if(_this.PromiseState!='pending') return;
        
        //1.修改对象的状态（PromiseState）
        _this.PromiseState='rejected';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;
    }

    try {
        //同步调用执行器函数
        excutor(resolve, reject);
    } catch (e) {
        //修改Promise对象的状态为失败
        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

# 5.6 then方法执行回调

​ 要实现then方法，就得调用回调函数，但此时不能直接调用形参onResolved函数或onRejected函数，因为实例有可能调用resolve()，也有可能调用rejected(),故自定义then方法需先做个判断分类处理，判断实例对象的状态值是fulfilled还是rejected即可。这里有个关键点，判断条件里的this是隐式绑定，即哪个实例调用这个函数（指自定义的then方法），this就指向这个实例，例子里的p调用了自定义的then方法，故判断条件里的this指向了实例p。

​ 同时，实例对象在调用resolve()或reject()或抛异常时，都会实参传递数据，具体的值存放在Promise实例的PromiseResult属性中，故在判断完毕后调用resolve()或reject()时将其作为参数传入即可。

index.html

<script>
    let p=new Promise((resolve, reject) =>{
        resolve('OK');
    });

    p.then(value=>{
        console.log(value);

    },reason=>{
        console.warn(reason);

    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

promise.js

Promise.prototype.then=function(onResolved,onRejected) {
    //调用回调函数 PromiseState
    if(this.PromiseState==='fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState==='rejected'){
        onRejected(this.PromiseResult);
    }
}
1
2
3
4
5
6
7
8
9

# 5.7 异步任务回调的执行

内置的Promise要求在excutor函数执行异步任务后成功调用回调函数（也就是then函数），例子中拿最简单的定时器模拟，现实场景可能会是文件、数据库、网络的IO等，总之并不是立即改变对象的状态。

分析例子场景，此时excutor内部的resolve('OK')语句得等异步任务结束后再执行，外层的都是同步的代码，故紧接着then方法被调用，可以发现由于修改Promise实例状态的resolve函数未先被调用，Promise实例状态则一直为'pending'未修改，原有的代码只针对fulfilled和rejected两种情况做了判断，回调函数将一直无法调用具体的onResolved()或onRejected()进行处理，表现到实例调用时的表象即为excutor内部调用resolve()或reject()改变实例状态后回调函数未执行。

所以then方法中还要对pending状态进行一下判断，但判断之后还有个处理回调函数执行时机的问题，原来的代码已实现的效果是：自定义的Promise同步任务先执行回调函数then方法，在then方法中再改变实例状态值，而在内置的Promise中，异步任务是先等待异步任务结束后调用resolve或reject方法改变状态后再执行回调函数then，我们要模仿这一特征，就要利用原有代码已有的效果去实现。

例子中回调函数then要等待异步任务resolve()执行再执行，所以应在自定义的resolve和reject方法内部，在修改Promise实例状态的语句后面执行回调函数，但resolve和reject方法与回调函数then不在同一作用域下，所以自定义的then方法在判断实例为pending状态需要保存回调函数，这是关键的一步。

而保存回调函数也有讲究，保存的变量不能直接写在then方法作用域外面，不然不安全，保存到自己身上最安全，所以下一步就是在自定义Promise内部添加一个属性callback，如果then方法判断Promise实例状态仍为pending，则保存形参onResolved和onRejected到callback属性上。实例excutor只可能调用一次resolve或reject方法修改实例状态（参考5.5小节），故onResolved和onRejected当中也只会有一个作为实参传递个给resolve或reject方法,二者内部执行回调函数时先做个判断，把该实参作为函数再调用一次用来改变实例状态即可（记得改变状态的同时还得改变结果值，将resolve或reject方法的形参data传进去即可）。

注意：我们不能在原先代码自定义的then方法中直接去调resolve或reject方法，因为此时我们对excutor函数内部执行的到底是resolve还是reject方法不能确定，擅自调用很有可能出现错误。

index.html

<script>
    let p=new Promise((resolve, reject) =>{
        resolve('OK');
    });

    p.then(value=>{
        console.log(value);
    },reason=>{
        console.warn(reason);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11

promise.js

function Promise(excutor) {

    //添加属性并指定默认值
    this.PromiseState='pending';
    this.PromiseResult=null;

    //声明属性保存回调函数then的实参
    this.callback={};

    //保存实例对象的this值
    const _this=this;

    //resolve函数
    function resolve(data){
        //判断状态，确保其只被修改过一次
        if(_this.PromiseState!='pending') return;

        //1.修改对象的状态（PromiseState）
        _this.PromiseState='fulfilled';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;

        //调用成功的回调函数
        if(_this.callback.onResolved){
            _this.callback.onResolved(data);
        }
    }
    //reject函数
    function reject(data){
        //判断状态，确保其只被修改过一次
        if(_this.PromiseState!='pending') return;

        //1.修改对象的状态（PromiseState）
        _this.PromiseState='rejected';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;

        //调用失败的回调函数
        if(_this.callback.onRejected){
            _this.callback.onRejected(data);
        }
    }

    try {
        //同步调用执行器函数
        excutor(resolve, reject);
    } catch (e) {
        //修改Promise对象的状态为失败
        reject(e);
    }
}

Promise.prototype.then=function(onResolved,onRejected) {
    //调用回调函数 PromiseState
    if(this.PromiseState==='fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState==='rejected'){
        onRejected(this.PromiseResult);
    }

    if(this.PromiseState==='pending'){
        this.callback={
            onResolved:onResolved,
            onRejected: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

# 5.8 指定多个回调的实现

内置的Promise实现了当实例状态发生改变时，指定的多个回调都会被执行的功能，参考4.2节。

注意这里例子excutor函数内部仍是执行的异步任务，所以回调方法then会进入判断状态为'pending'的处理分支中，如果执行的是同步任务，则所有回调都会被正常执行，此时异步任务不能实现该功能的原因是：后一个回调会把前一个回调传入的实参onResolved或onRejected给覆盖掉，所以只有最后一个回调的语句能被执行。

解决思路：把callback属性改造成数组callbacks，在回调函数then的'pending'处理分支中，把多个回调传进来的实参onResolved或onRejected循环压进callbacks数组中，resolve或reject方法内部再从callbacks数组中循环执行这些实参（也是函数，说白了就是value=>{},reason=>{}这两个花括号{}中的执行语句）

index.html

<script>
    let p=new Promise((resolve, reject) =>{
        setTimeout(() => {
            //resolve('OK');
            reject('error');
        },1000);
    });

    p.then(value=>{
        console.log(value);
    },reason=>{
        console.warn(reason);
    })

    p.then(value=>{
        alert(value);
    },reason=>{
        alert(reason);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

promise.js

function Promise(excutor) {

    //添加属性并指定默认值
    this.PromiseState='pending';
    this.PromiseResult=null;

    //声明属性保存回调函数then的实参
    this.callbacks=[];

    //保存实例对象的this值
    const _this=this;

    //resolve函数
    function resolve(data){
        //判断状态，确保其只被修改过一次
        if(_this.PromiseState!='pending') return;

        //1.修改对象的状态（PromiseState）
        _this.PromiseState='fulfilled';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;

        //调用成功的回调函数

        _this.callbacks.forEach(item=>{
            item.onResolved(data);
        });
    }
    //reject函数
    function reject(data){
        //判断状态，确保其只被修改过一次
        if(_this.PromiseState!='pending') return;

        //1.修改对象的状态（PromiseState）
        _this.PromiseState='rejected';
        //2.修改对象的结果值（PromiseResult）
        _this.PromiseResult=data;

        //调用失败的回调函数
        _this.callbacks.forEach(item=>{
            item.onRejected(data);
        });
    }

    try {
        //同步调用执行器函数
        excutor(resolve, reject);
    } catch (e) {
        //修改Promise对象的状态为失败
        reject(e);
    }
}

Promise.prototype.then=function(onResolved,onRejected) {
    //调用回调函数 PromiseState
    if(this.PromiseState==='fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState==='rejected'){
        onRejected(this.PromiseResult);
    }

    if(this.PromiseState==='pending'){
        this.callbacks.push({
            onResolved: onResolved,
            onRejected: 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

# 5.9 同步修改状态then方法返回

then方法返回结果特点：

then方法的返回结果是由其指定的回调函数的执行结果决定的，如果执行结果是undefined、数字、字符串等非Promise类型的数据，then方法的返回结果即为成功状态的Promise实例，如果执行结果是一个Promise实例，则该Promise实例就决定了then方法的返回结果和状态。

功能实现思路：

首先自定义的回调函数then得有个Promise实例作为返回值，其次excutor内部仍有可能执行resolve或reject函数，所以分类讨论，当excutor内部执行resolve函数时，进入自定义then方法判断为fulfilled的处理分支，此时我们需要保存一下回调onResolved方法的执行结果，然后判断它是否为自定义的Promise的实例。

如果不是，则then方法返回的Promise实例状态应为成功，所以调一下自定义then的形参resolve方法，并把回调onResolved方法的执行结果作为结果值传进去即可；反之如果是的话，说明excutor传过来的就是一个Promise实例，对该实例再调一次then方法，做value和reason两条分支的讨论，并且excutor传过来的Promise成功/失败的结果，就是then方法返回的Promise成功/失败的结果，所以分别调resolve(v)、reject(r)即可。

以上是fulfilled的处理分支的处理细节，类似的，当excutor内部执行reject函数时，进入自定义then方法判断为rejectd的处理分支，再对代码进行上一段相近的处理即可。

注意：之前已经在自定义Promise调用excutor函数保持同步时try/catch过了，所以当实例then方法内部抛出异常时，不需要在then方法内部的判断分支分别再来一次try/catch了。

excutor调用resolve方法，then方法内部回调return一个字符串hello Promise后，打印then方法的返回结果的截图

image-20211216195456931

excutor调用reject方法，then方法内部回调return一个字符串hello Promise后，打印then方法的返回结果的截图

image-20211216195907389

excutor调用resolve/reject方法，then方法内部回调抛出异常后，打印then方法的返回结果的截图

image-20211216195126202

index.html

<script>
    let p = new Promise((resolve, reject) => {
        resolve('OK');
        //reject("error");
    });

    const res = p.then(
        (value) => {
            //console.log(value);
            //return "hello Promise";
            // return new Promise((resolve, reject) => {
            //     //resolve('success');
            //     reject("oh no");
            // })
            throw 'FAIL';
        },
        (reason) => {
            //return "hello Promise";
            //throw 'FAIL';
            //console.warn(reason);
        }
    );

    console.log(res);
</script>
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

promise.js

Promise.prototype.then = function (onResolved, onRejected) {
    //回调函数then需要返回Promise实例
	return new Promise((resolve, reject) => {
		//调用回调函数 PromiseState
		if (this.PromiseState === "fulfilled") {
            //获取回调函数的执行结果
			let result=onResolved(this.PromiseResult);

            //判断是否为执行结果是否为自定义的Promise类型
            if(result instanceof Promise){
                //执行结果为自定义Promise，再分类处理
                result.then(v=>{
                    resolve(v);
                },r=>{
                    reject(r);
                })
            }else{
                //结果的实例状态为成功
                resolve(result);
            }
		}
		if (this.PromiseState === "rejected") {
			let result=onRejected(this.PromiseResult);

            //判断是否为执行结果是否为自定义的Promise类型
            if(result instanceof Promise){
                //执行结果为自定义Promise，再分类处理
                result.then(v=>{
                    resolve(v);
                },r=>{
                    reject(r);
                })
            }else{
                //结果的实例状态为失败
                reject(result);
            }
		}

		if (this.PromiseState === "pending") {
			this.callbacks.push({
				onResolved: onResolved,
				onRejected: 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

# 5.10 异步修改状态then方法返回

接着上一节的代码，excutor内部执行resolve方法，发现自定义的then方法返回结果一直是一个pending状态的Promise实例，故我们要在自定义的then方法判断为pending的处理分支改进一下代码逻辑。原先只是单纯地传了onResolved或onRejected，现在则需要抽象出一个单独的函数，不仅要调用这两个函数，还得把当前实例的PromiseResult传进去，同时保存它们的执行结果，接着做与5.9小节相类似的逻辑处理（这里为了处理throw异常，就必须加try/catch语句了）。

注1：这里依然有作用域不一致的问题，所以依然得先保存一个指向自定义then方法的变量_this，用来获取被修改后的实例状态。

注2：打印自定义then方法返回结果需要等异步任务执行结束后再展开，不然此时实例状态会一直是pending

index.html

<script>
    let p = new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve('OK');
        },1000)
    });

    const res = p.then(
        (value) => {
            console.log(value);
        },(reason) => {
            console.warn(reason);
        }
    );
    console.log(res);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

promise.js

Promise.prototype.then = function (onResolved, onRejected) {
	//回调函数then需要返回Promise实例
	return new Promise((resolve, reject) => {
		const _this = this;

		//调用回调函数 PromiseState
		if (this.PromiseState === "fulfilled") {
			//获取回调函数的执行结果
			let result = onResolved(this.PromiseResult);

			//判断是否为执行结果是否为自定义的Promise类型
			if (result instanceof Promise) {
				//执行结果为自定义Promise，再分类处理
				result.then(
					(v) => {
						resolve(v);
					},
					(r) => {
						reject(r);
					}
				);
			} else {
				//结果的实例状态为成功
				resolve(result);
			}
		}
		if (this.PromiseState === "rejected") {
			let result = onRejected(this.PromiseResult);

			//判断是否为执行结果是否为自定义的Promise类型
			if (result instanceof Promise) {
				//执行结果为自定义Promise，再分类处理
				result.then(
					(v) => {
						resolve(v);
					},
					(r) => {
						reject(r);
					}
				);
			} else {
				//结果的实例状态为成功
				resolve(result);
			}
		}

		if (this.PromiseState === "pending") {
			this.callbacks.push({
				onResolved: function () {
					try {
						//获取回调函数的执行结果
						let result = onResolved(this.PromiseResult);
						//判断是否为执行结果是否为自定义的Promise类型
						if (result instanceof Promise) {
							//执行结果为自定义Promise，再分类处理
							result.then(
								(v) => {
									resolve(v);
								},(r) => {
									reject(r);
								}
							);
						} else {
							//结果的实例状态为成功
							resolve(result);
						}
					} catch (e) {
						reject(e);
					}
				},
				onRejected: function () {
					try {
						//获取回调函数的执行结果
						let result = onRejected(this.PromiseResult);
						//判断是否为执行结果是否为自定义的Promise类型
						if (result instanceof Promise) {
							//执行结果为自定义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
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

# 5.11 then方法完善和优化

本小节主要是将重复的try/catch部分逻辑代码抽象成一个函数callback，并将回调作为形参type传进去调用即可（函数要封装在返回的Promise内部，这样逻辑分支调callback函数时与其作用域保持一致）

注1：callback函数要使用箭头函数的方式指定参数type，不然运行后会报'type' is not a function错误

注2：在保存回调函数的执行结果时，还是存在作用域不一致的问题，直接用this会指向callback函数本身，所以这里要用到先前设置的变量_this，参考5.10小节注1，还有let指令也是必须的，不然会导致异步任务回调执行失败，这时比如5.12小节就出现了相关问题，会导致我们看不到catch函数打印的失败回调信息。

promise.js

Promise.prototype.then = function (onResolved, onRejected) {
	const _this = this;

	//回调函数then需要返回Promise实例
	return new Promise((resolve, reject) => {
		let callback=type =>{
			try {
				//获取回调函数的执行结果
				let result = type(_this.PromiseResult);

				//判断是否为执行结果是否为自定义的Promise类型
				if (result instanceof Promise) {
					//执行结果为自定义Promise，再分类处理
					result.then(
						(v) => {
							resolve(v);
						},
						(r) => {
							reject(r);
						}
					);
				} else {
					//结果的实例状态为成功
					resolve(result);
				}
			} catch (e) {
				reject(e);
			}
		}

		//调用回调函数 PromiseState
		if (this.PromiseState === "fulfilled") {
            callback(onResolved);
		}
		if (this.PromiseState === "rejected") {
			callback(onRejected);
		}

		if (this.PromiseState === "pending") {
			this.callbacks.push({
				onResolved: function () {
					callback(onResolved);
				},
				onRejected: function () {
					callback(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

# 5.12 catch方法-异常穿透和值传递

catch方法直接借助自定义then缺省传入onRejected回调即可实现。

本小节借助下列举的例子做分析，实现异常穿透。原先promise.js代码未被改动，浏览器会报错onRejected is not a function，这是因为该实例会先处于pending状态，Promise实例excutor内部调用reject函数，，且此时第一个then只指定了成功的回调（onResolved），没有指定失败的回调（onRejected），也就是说失败的回调此时是个undefined，然后该实例变为rejected状态，自定义Promise中的reject函数会被执行，而其又会调用失败的回调函数（即item**.**onRejected(data);），而该回调函数被传进来是正是undefined，所以浏览器会这样报错。

故问题的根源就出在实例调用then方法时没传失败的回调函数，但内置的Promise是允许用户这样使用的，所以我们要模仿这一特征，关键点在于要给失败的回调函数准备一个默认值即可（这是第二个参数，传进来的第一个参数永远被认为是成功的回调函数，故不用考虑类似处理），而赋值的地方就要放在自定义then方法内部的前列，在进入判断实例状态的逻辑分支之前就给失败回调赋默认值。具体到例子，就类似于代码变成了这样：

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("OK");
    }, 1000);
});    

p.then((value) => {
            console.log(111);
        },reason=>{
            throw reason;
        }).then(value=> {
            console.log(222);
        },reason=>{
            throw reason;
        }).then(value => {
            console.log(333);
        },reason=>{
            throw reason;
        }).catch(reason => {
            console.warn(reason);
        });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

此时我们为每一个then方法准备了失败的回调函数（从浏览器的报错onRejected is not a function入手做判断）。因为实例调用的是reject方法，我们进入的就是失败回调，而它又一直抛出异常，就像抛绣球一样在then调用链中传递，直至抵达catch函数被其处理异常（内里还是调的reject方法）。至此，我们就实现了catch方法的异常穿透。

注1：当作了上述改进后，就算Promise实例调用的是resolve方法，而在then调用链中某个成功回调函数内部也使用了throw语句，catch的穿透功能也依然有效，因为在调用下一个then时，我们进入的就是这个then的失败回调了，然后就相当于重复一遍上述流程。

接下来值传递的功能，就是then调用链中，中途有某个then同时不传成功和失败的回调也能顺利执行下去，就类似于下方的例子，而当前自定义代码不能实现这样的功能，会报错onResolved is not a function，原因与刚刚值穿透的分析是一样的。

p.then()
 .then((value) => {
     console.log(111);
 }).then(value=> {
     console.log(222);
 }).then(value => {
     console.log(333);
 }).catch(reason => {
     console.warn(reason);
 });
1
2
3
4
5
6
7
8
9
10

实现思路也很简单，仿照异常穿透的思路，为成功回调函数准备个默认值，这样就算成功回调内部语句是空的也不要紧。

index.html

<script>
    let p = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("OK");
        }, 1000);
    });

    p.then((value) => {
        console.log(111);
    }).then(value=> {
        console.log(222);
    }).then(value => {
        console.log(333);
    }).catch(reason => {
        console.warn(reason);
    });

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

promise.js

Promise.prototype.then = function (onResolved, onRejected) {
	const _this = this;
    //判断回调函数参数，为失败回调赋默认值，注意名称onRejected要写对
    if(typeof onRejected!='function'){
        onRejected=reason=>{throw reason};
    }
    if(typeof onResolved!='function'){
        onResolved=value=>value;
        //相当于value=>{return value;}
    }

	//回调函数then需要返回Promise实例
	return new Promise((resolve, reject) => {
		let callback=type =>{
			try {
				//获取回调函数的执行结果
				let result = type(_this.PromiseResult);

				//判断是否为执行结果是否为自定义的Promise类型
				if (result instanceof Promise) {
					//执行结果为自定义Promise，再分类处理
					result.then(
						(v) => {
							resolve(v);
						},
						(r) => {
							reject(r);
						}
					);
				} else {
					//结果的实例状态为成功
					resolve(result);
				}
			} catch (e) {
				reject(e);
			}
		}

		//调用回调函数 PromiseState
		if (this.PromiseState === "fulfilled") {
			callback(onResolved);
		}
		if (this.PromiseState === "rejected") {
			callback(onRejected);
		}

		if (this.PromiseState === "pending") {
			this.callbacks.push({
				onResolved: function () {
					callback(onResolved);
				},
				onRejected: function () {
					callback(onRejected);
				},
			});
		}
	});
};

//添加catch方法
Promise.prototype.catch = function (onRejected) {
	return this.then(undefined, 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

# 5.13 then方法回调的异步执行

结合例子来分析，代码输出的顺序应是111，333，222，这是因为实例调用的then方法是异步执行的，它得等所有同步代码执行完毕后再执行，而当前代码的输出结果却是111，222，333，这就说明 then方法回调的异步执行还未被实现。

针对这点，我们需要在自定义then方法的fulfilled和rejected处理分支分别将调用自定义的callback函数语句用queueMicrotask(()=>{})包裹起来，同时还有自定义的resolve和reject函数的执行成功/失败回调部分也用queueMicrotask(()=>{})包裹，这样then方法回调就全部是异步执行的了。

注1：用queueMicrotask(()=>{})包裹是因为它是异步任务，而且是存进微任务队列中等待执行，与内置Promise的特性一致，而setTimeout(()=>{})虽然也是是异步任务，但它存进的是宏任务队列，所以不能用。

**注2：**Promise是宏任务(同步执行)，但Promise 的回调函数属于异步任务，会在同步任务之后执行(比如说 then、 catch 、finally)。

**注3：**Promise 的回调函数不是正常的异步任务，而是微任务（microtask）。它们的区别在于，正常任务追加到下一轮事件循环，微任务追加到本轮事件循环。这意味着，微任务的执行时间一定早于正常任务。

**注4：**只有在没有其他办法的时候，要么是当创建框架或库时需要使用微任务，不然会有性能问题。

index.html

<script>
    let p = new Promise((resolve, reject) => {

        resolve("OK");
        console.log(111);
    });

    p.then((value) => {
        console.log(222);
    })
    console.log(333);
</script>
1
2
3
4
5
6
7
8
9
10
11
12

promise.js

function Promise(excutor) {
	//添加属性并指定默认值
	this.PromiseState = "pending";
	this.PromiseResult = null;

	//声明属性保存回调函数then的实参
	this.callbacks = [];

	//保存实例对象的this值
	const _this = this;

	//resolve函数
	function resolve(data) {
		//判断状态，确保其只被修改过一次
		if (_this.PromiseState != "pending") return;

		//1.修改对象的状态（PromiseState）
		_this.PromiseState = "fulfilled";
		//2.修改对象的结果值（PromiseResult）
		_this.PromiseResult = data;

		//调用成功的回调函数
        queueMicrotask(()=>{
            _this.callbacks.forEach((item) => {
                item.onResolved(data);
            });
        })
	}
	//reject函数
	function reject(data) {
		//判断状态，确保其只被修改过一次
		if (_this.PromiseState != "pending") return;

		//1.修改对象的状态（PromiseState）
		_this.PromiseState = "rejected";
		//2.修改对象的结果值（PromiseResult）
		_this.PromiseResult = data;

		//调用失败的回调函数
        queueMicrotask(()=>{
            _this.callbacks.forEach((item) => {
                item.onRejected(data);
            });
        })
	}

	try {
		//同步调用执行器函数
		excutor(resolve, reject);
	} catch (e) {
		//修改Promise对象的状态为失败
		reject(e);
	}
}

Promise.prototype.then = function (onResolved, onRejected) {
	const _this = this;
    //判断回调函数参数，为失败回调赋默认值，注意名称onRejected要写对
    if(typeof onRejected!='function'){
        onRejected=reason=>{throw reason};
    }
    if(typeof onResolved!='function'){
        onResolved=value=>value;
        //相当于value=>{return value;}
    }

	//回调函数then需要返回Promise实例
	return new Promise((resolve, reject) => {
		let callback=type =>{
			try {
				//获取回调函数的执行结果
				let result = type(_this.PromiseResult);

				//判断是否为执行结果是否为自定义的Promise类型
				if (result instanceof Promise) {
					//执行结果为自定义Promise，再分类处理
					result.then(
						(v) => {
							resolve(v);
						},
						(r) => {
							reject(r);
						}
					);
				} else {
					//结果的实例状态为成功
					resolve(result);
				}
			} catch (e) {
				reject(e);
			}
		}

		//调用回调函数 PromiseState
		if (this.PromiseState === "fulfilled") {
            queueMicrotask(()=>{
                callback(onResolved);
            })

		}
		if (this.PromiseState === "rejected") {
            queueMicrotask(()=>{
                callback(onRejected);
            })
		}

		if (this.PromiseState === "pending") {
			this.callbacks.push({
				onResolved: function () {
					callback(onResolved);
				},
				onRejected: function () {
					callback(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
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

# 5.14 其余内置方法的封装

注意点：

  1. 这些内置方法全都是属于自定义的Promise函数，而不是属于自定义Promise实例的，所以声明时要用Promise.resolve 这样的方式，而不是Promise.prototype.catch这样的方式。

promise.js

/*
    返回一个指定了成功 value 的 promise 对象
    value: 一般数据或 promise
*/
Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(resolve, reject)
        } else {
            resolve(value)
        }
    })
}


/*
    返回一个指定了失败 reason 的 promise 对象
    reason: 一般数据/error
*/
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason)
    })
}

/*
返回一个新的 promise 对象, 只有 promises 中所有 promise 都产生成功 value 时, 才
最终成功, 只要有一个失败就直接失败
*/
Promise.all = function (promises) {
        // 返回一个新的 promise
        return new Promise((resolve, reject) => {
                // 已成功的数量
                let resolvedCount = 0
                // 待处理的 promises 数组的长度
                const promisesLength = promises.length
                // 准备一个保存成功值的数组
                const values = new Array(promisesLength)
                // 遍历每个待处理的 promise
                for (let i = 0; i < promisesLength; i++) {
                // promises 中元素可能不是一个数组, 需要用 resolve 包装一下
                Promise.resolve(promises[i]).then(
                value => {
                // 成功当前 promise 成功的值到对应的下标
                values[i] = value
                // 成功的数量加 1
                resolvedCount++
                // 一旦全部成功
                if(resolvedCount===promisesLength) {
                // 将所有成功值的数组作为返回 promise 对象的成功结果值
                resolve(values)
                }
            },reason => {
                // 一旦有一个promise产生了失败结果值, 将其作为返回promise对象的失败结果值
                reject(reason);
            })
        }
    })
}



/*
返回一个 promise，一旦某个 promise 解决或拒绝， 返回的 promise 就会解决或拒绝。
*/
Promise.race = function (promises) {
    // 返回新的 promise 对象
    return new Promise((resolve, reject) => {
            // 遍历所有 promise
        for (var i = 0; i < promises.length; i++) {
            Promise.resolve(promises[i]).then(
            (value) => { // 只要有一个成功了, 返回的 promise 就成功了
                resolve(value)
            },(reason) => { // 只要有一个失败了, 返回的结果就失败了
                reject(reason)
            })
        }
    })
}

/*
    返回一个延迟指定时间才确定结果的 promise 对象
*/
Promise.resolveDelay = function (value, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (value instanceof Promise) { 
                // 如果 value 是一个 promise, 取这个promise 的结果值作为返回的 promise 的结果值
                 value.then(resolve, reject) 
            } else {
                // 如果 value 成功, 调用resolve(val), 如果 value 失败了, 调用 reject(reason)
                resolve(value)
            }
        }, time);
    })
}


/*
    返回一个延迟指定时间才失败的 Promise 对象。
*/
Promise.rejectDelay = function (reason, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(reason)
        }, time)
    })
}
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

# 5.15 class版本的实现

本小节将先前实现的自定义Promise改造成类的形式

**注意：**rsolve、reject等方法在Promise改造成类后仍从属于Promise类，而非Promise实例，所以要加一个static关键字，就类似于Java一样，它们被改造成为了属于类本身的静态方法。

class Promise {
    //构造方法
	constructor(excutor) {
		//添加属性并指定默认值
		this.PromiseState = "pending";
		this.PromiseResult = null;

		//声明属性保存回调函数then的实参
		this.callbacks = [];

		//保存实例对象的this值
		const _this = this;

		//resolve函数
		function resolve(data) {
			//判断状态，确保其只被修改过一次
			if (_this.PromiseState != "pending") return;

			//1.修改对象的状态（PromiseState）
			_this.PromiseState = "fulfilled";
			//2.修改对象的结果值（PromiseResult）
			_this.PromiseResult = data;

			//调用成功的回调函数
			queueMicrotask(() => {
				_this.callbacks.forEach((item) => {
					item.onResolved(data);
				});
			});
		}
		//reject函数
		function reject(data) {
			//判断状态，确保其只被修改过一次
			if (_this.PromiseState != "pending") return;

			//1.修改对象的状态（PromiseState）
			_this.PromiseState = "rejected";
			//2.修改对象的结果值（PromiseResult）
			_this.PromiseResult = data;

			//调用失败的回调函数
			queueMicrotask(() => {
				_this.callbacks.forEach((item) => {
					item.onRejected(data);
				});
			});
		}

		try {
			//同步调用执行器函数
			excutor(resolve, reject);
		} catch (e) {
			//修改Promise对象的状态为失败
			reject(e);
		}
	}

    //then方法封装
    then(onResolved, onRejected) {
        const _this = this;
        //判断回调函数参数，为失败回调赋默认值，注意名称onRejected要写对
        if (typeof onRejected != "function") {
            onRejected = (reason) => {
                throw reason;
            };
        }
        if (typeof onResolved != "function") {
            onResolved = (value) => value;
            //相当于value=>{return value;}
        }
    
        //回调函数then需要返回Promise实例
        return new Promise((resolve, reject) => {
            let callback = (type) => {
                try {
                    //获取回调函数的执行结果
                    let result = type(_this.PromiseResult);
    
                    //判断是否为执行结果是否为自定义的Promise类型
                    if (result instanceof Promise) {
                        //执行结果为自定义Promise，再分类处理
                        result.then(
                            (v) => {
                                resolve(v);
                            },
                            (r) => {
                                reject(r);
                            }
                        );
                    } else {
                        //结果的实例状态为成功
                        resolve(result);
                    }
                } catch (e) {
                    reject(e);
                }
            };
    
            //调用回调函数 PromiseState
            if (this.PromiseState === "fulfilled") {
                queueMicrotask(() => {
                    callback(onResolved);
                });
            }
            if (this.PromiseState === "rejected") {
                queueMicrotask(() => {
                    callback(onRejected);
                });
            }
    
            if (this.PromiseState === "pending") {
                this.callbacks.push({
                    onResolved: function () {
                        callback(onResolved);
                    },
                    onRejected: function () {
                        callback(onRejected);
                    },
                });
            }
        });
    };

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

    //静态resolve方法
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(resolve, reject);
            } else {
                resolve(value);
            }
        });
    };

    //静态reject方法
    static reject(reason) {
	    return new Promise((resolve, reject) => {
		    reject(reason);
	    });
    };

    //all方法
    static all(promises) {
        // 返回一个新的 promise
        return new Promise((resolve, reject) => {
            // 已成功的数量
            let resolvedCount = 0;
            // 待处理的 promises 数组的长度
            const promisesLength = promises.length;
            // 准备一个保存成功值的数组
            const values = new Array(promisesLength);
            // 遍历每个待处理的 promise
            for (let i = 0; i < promisesLength; i++) {
                // promises 中元素可能不是一个数组, 需要用 resolve 包装一下
                Promise.resolve(promises[i]).then(
                    (value) => {
                        // 成功当前 promise 成功的值到对应的下标
                        values[i] = value;
                        // 成功的数量加 1
                        resolvedCount++;
                        // 一旦全部成功
                        if (resolvedCount === promisesLength) {
                            // 将所有成功值的数组作为返回 promise 对象的成功结果值
                            resolve(values);
                        }
                    },
                    (reason) => {
                        // 一旦有一个promise产生了失败结果值, 将其作为返回promise对象的失败结果值
                        reject(reason);
                    }
                );
            }
        });
    };

    //race方法
    static race(promises) {
        // 返回新的 promise 对象
        return new Promise((resolve, reject) => {
            // 遍历所有 promise
            for (var i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i]).then(
                    (value) => {
                        // 只要有一个成功了, 返回的 promise 就成功了
                        resolve(value);
                    },
                    (reason) => {
                        // 只要有一个失败了, 返回的结果就失败了
                        reject(reason);
                    }
                );
            }
        });
    };

    //resolveDelay方法
    static resolveDelay(value, time) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (value instanceof Promise) {
                    // 如果 value 是一个 promise, 取这个promise 的结果值作为返回的 promise 的结果值
                    value.then(resolve, reject);
                } else {
                    // 如果 value 成功, 调用resolve(val), 如果 value 失败了, 调用 reject(reason)
                    resolve(value);
                }
            }, time);
        });
    };


    //rejectDelay方法
    static rejectDelay(reason, time) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                reject(reason);
            }, time);
        });
    };
};
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
225
#Promise
MongoDB篇
Git篇

← Git篇→

最近更新
01
HTTP协议及缓存机制
05-28
02
开发环境
05-28
03
JS基础知识（一）-变量类型和计算
05-28
更多文章>
Theme by Vdoing | Copyright © 2021-2023 uploadhub | MIT License