• Promise从入门到精通（第3章 自定义(手写)Promise）

    Promise从入门到精通（第3章 手写Promise）

    第3章 自定义(手写)Promise

    3.1 搭建Promise初始结构

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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.log(reason);
        });
    script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    function Promise(executor){
    
}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    3.2 resolve和reject结构搭建

    function Promise(executor){

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data){
        
    }
    function reject(data){
        
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    executor();
}

// 添加then方法
Promise.prototype.then = function(onResolved, onRejected){

}

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

    3.3 resolve和reject代码实现

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    executor(resolve, reject);
}

// 添加then方法
Promise.prototype.then = function (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

    3.4 throw抛出异常改变状态

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
    
}

// 添加then方法
Promise.prototype.then = function (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

    3.5 Promise对象状态只能修改一次

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    } 
}

// 添加then方法
Promise.prototype.then = function (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

    3.6 then方法执行回调

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
    
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // 因为then方法是Promise的实例对象p调用的，因此这里的this就是对象p，可通过this.PromiseState获取对象的状态
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    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

    3.7 异步任务的回调执行

    这种保存回调的方式有缺陷，不适合链式调用then方法

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;

    // 保存then中的回调函数
    this.callback = {};

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后查看回调，并执行成功的回调函数
        if(self.callback.onResolved){
            self.callback.onResolved(data);
        }
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后查看回调，并执行失败的回调函数
        if(self.callback.onRejected){
            self.callback.onRejected(data);
        }
    }

    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
    
}

// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // 因为then方法是Promise的实例对象p调用的，因此这里的this就是对象p，可通过this.PromiseState获取对象的状态
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }

    // 如果Promise中有异步任务，那么需要将then中的回调函数保存，等待异步任务结束后，改变完Promise的状态后再执行then中的回调函数
    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

    3.8 指定多个回调函数的实现

    image-20220727105351006

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if(self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element=>{
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try{
        executor(resolve, reject);
    }catch(e){
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    // 因为then方法是Promise的实例对象p调用的，因此这里的this就是对象p，可通过this.PromiseState获取对象的状态
    if(this.PromiseState === 'fulfilled'){
        onResolved(this.PromiseResult);
    }
    if(this.PromiseState === 'rejected'){
        onRejected(this.PromiseResult);
    }
    // 如果Promise中有异步任务，那么需要将then中的回调函数保存，
    // 等待异步任务结束后，改变完Promise的状态后再执行then中的回调函数
    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

    3.9 同步修改状态then方法的结果返回

    在这里插入图片描述

    3.10 异步修改状态then方法的结果返回

    因为Promise中包含的任务是异步的，因此当p调用then方法时，Promise的状态还未改变，仍是初始状态pending，所以在then方法内部会满足第三个判断的条件this.PromiseState === ‘pending’，在这个判断内部是将then的回调函数加入callbacks中，待Promise的状态改变后执行相应的成功或失败的回调方法，

    如果同步任务成功了，那么会执行then中的onResolved方法，这个方法的结果由其回调函数的结果决定，如果回调函数返回一个Promise，那么这个Promise的结果决定了onResolved方法的结果，如果回调函数返回其他值，如字符串，undefined，那么就返回resolve
    在这里插入图片描述

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element => {
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
        if (this.PromiseState === 'fulfilled') {
            try {
                let res = onResolved(this.PromiseResult);
                if (res instanceof Promise) {
                    console.log("走这了")
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }
        if (this.PromiseState === 'rejected') {
            onRejected(this.PromiseResult);
        }
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onResolved: function () {
                    try {
                        let res = onResolved(self.PromiseResult);
                        if (res instanceof Promise) {
                            res.then(v => {
                                resolve(v)
                            }, r => {
                                reject(r)
                            });
                        } else {
                            resolve(res)
                        }
                    } catch (error) {
                        reject(error)
                    }
                },
                onRejected: function () {
                    try {
                        let res = onRejected(self.PromiseResult);
                        if (res instanceof Promise) {
                            res.then(v => {
                                resolve(v)
                            }, r => {
                                reject(r)
                            });
                        } else {
                            resolve(res)
                        }
                    } catch (error) {
                        reject(error)
                    }

                }
            })
        }
    });

}

    • 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
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise封装-初始结构搭建title>
    
    <script src="./promise.js">script>
head>
<body>
    <script>
        let p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                resolve("ok");
            }, 1000)
        });
        console.log('p:',p)

        const result = p.then(value=>{
            // return new Promise((resolve, reject)=>{
            //     resolve("ok");
            // })
            // console.log(value);
            throw "err";
        },reason=>{
            console.log(reason);
        });
        console.log(result);
        // p.then(value=>{
        //     console.log(value);
        // },reason=>{
        //     console.log(reason);
        // });
    script>
body>
html>

    • 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

    3.12 then方法的完善与优化

    在这里插入图片描述

    优化后完整版：

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element => {
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new Promise((resolve, reject) => {
	   // 封装函数
        function callBack(type) {
            try {
                let res = type(self.PromiseResult);
                if (res instanceof Promise) {
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }

        if (this.PromiseState === 'fulfilled') {
            callBack(onResolved);
        }
        if (this.PromiseState === 'rejected') {
            callBack(onRejected);
        }
        // 判断pending函数
        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

    3.13 catch方法异常穿透和值传递

    在这里插入图片描述

    在这里插入图片描述

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        self.callbacks.forEach(element => {
            element.onResolved(data)
        });
    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        self.callbacks.forEach(element => {
            element.onRejected(data)
        })
    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    // 判断是否传入回调函数的参数
    if(typeof onRejected !== 'function'){
        onRejected = reason => {
            throw reason;
        }
    }
    if(typeof onResolved !== 'function'){
        onResolved = value => value;
    }
    return new Promise((resolve, reject) => {

        function callBack(type) {
            try {
                let res = type(self.PromiseResult);
                if (res instanceof Promise) {
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }

        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
    • 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

    3.14 Promise中方法的封装(resolve, reject, race, all)

    3.14.1 Promise.resolve方法的封装

    // 添加Promise.resolve方法
Promise.resolve = function(value){
    // 返回Promise对象
    return new Promise((resolve, reject)=>{
        if(value instanceof Promise){
            value.then(v=>{
                resolve(value);
            },r=>{
                reject(value);
            })
        }else{
            resolve(value);
        }
    });
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    3.14.2 Promise.reject方法的封装

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    3.14.3 Promise.all方法的封装

    // 添加Promise.all方法
Promise.all = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        // 记录成功的Promise个数
        let count = 0;
        // 保存每个成功的结果
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, r => {
                reject(r)
            });
        }
    });
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    3.14.4 Promise.race方法的封装

    // 添加Promise.race方法
Promise.race = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            // 谁跑得快，谁改变状态
            promises[i].then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
            // 改变状态后，后面进来的都没必要执行了，直接break
            break;
        }
    });
}

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

    3.14.5 then方法的异步执行

    在这里插入图片描述

    在这里插入图片描述

    3.15 Promise完整实现

    // 声明构造函数
function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    // 保存实例对象中的this值
    const self = this;
    // 保存then中的回调函数
    this.callbacks = [];

    // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
    function resolve(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'fulfilled';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行所有成功的回调函数
        setTimeout(() => {
            self.callbacks.forEach(element => {
                element.onResolved(data)
            });
        });

    };

    function reject(data) {
        // 如果对象状态不为pending，那就直接返回，不执行下面的代码
        if (self.PromiseState !== 'pending') return;
        // 1.修改对象的状态（PromiseState）
        self.PromiseState = 'rejected';
        // 2.设置对象的结果值（PromiseResult）
        self.PromiseResult = data;

        // 异步任务结束后逐个执行失败的回调函数
        setTimeout(() => {
            self.callbacks.forEach(element => {
                element.onRejected(data)
            });
        });

    }
    // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}
// 添加then方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    // 判断是否传入回调函数的参数
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }
    return new Promise((resolve, reject) => {

        function callBack(type) {
            try {
                let res = type(self.PromiseResult);
                if (res instanceof Promise) {
                    res.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    resolve(res)
                }
            } catch (e) {
                reject(e)
            }
        }

        if (this.PromiseState === 'fulfilled') {
            setTimeout(() => {
                callBack(onResolved);
            })
        }
        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                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);
}

// 添加Promise.resolve方法
Promise.resolve = function (value) {
    // 返回Promise对象
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(value);
            }, r => {
                reject(value);
            })
        } else {
            resolve(value);
        }
    });
}

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

// 添加Promise.all方法
Promise.all = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        // 记录成功的Promise个数
        let count = 0;
        // 保存每个成功的结果
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                count++;
                arr[i] = v;
                if (count === promises.length) {
                    resolve(arr);
                }
            }, r => {
                reject(r)
            });
        }
    });
}
// 添加Promise.race方法
Promise.race = function (promises) {
    // 返回一个新的Promise对象
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            // 谁跑得快，谁改变状态
            promises[i].then(v => {
                resolve(v);
            }, r => {
                reject(r);
            });
            // 改变状态后，后面进来的都没必要执行了，直接break
            break;
        }
    });
}

    • 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

    3.16 class版本实现

    class Promise {
    // 构造方法
    constructor(executor) {
        // 添加属性
        this.PromiseState = 'pending';
        this.PromiseResult = null;
        // 保存实例对象中的this值
        const self = this;
        // 保存then中的回调函数
        this.callbacks = [];

        // 因为resolve和reject在使用时是一个函数，因此要定义两个函数
        function resolve(data) {
            // 如果对象状态不为pending，那就直接返回，不执行下面的代码
            if (self.PromiseState !== 'pending') return;
            // 1.修改对象的状态（PromiseState）
            self.PromiseState = 'fulfilled';
            // 2.设置对象的结果值（PromiseResult）
            self.PromiseResult = data;

            // 异步任务结束后逐个执行所有成功的回调函数
            setTimeout(() => {
                self.callbacks.forEach(element => {
                    element.onResolved(data)
                });
            });
        };

        function reject(data) {
            // 如果对象状态不为pending，那就直接返回，不执行下面的代码
            if (self.PromiseState !== 'pending') return;
            // 1.修改对象的状态（PromiseState）
            self.PromiseState = 'rejected';
            // 2.设置对象的结果值（PromiseResult）
            self.PromiseResult = data;

            // 异步任务结束后逐个执行失败的回调函数
            setTimeout(() => {
                self.callbacks.forEach(element => {
                    element.onRejected(data)
                });
            });

        }
        // 执行器函数在内部是同步调用的，直接拿来后面加一个括号就可同步调用
        try {
            executor(resolve, reject);
        } catch (e) {
            reject(e);
        }
    }
    // then方法的封装
    then(onResolved, onRejected) {
        const self = this;
        // 判断是否传入回调函数的参数
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason;
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => value;
        }
        return new Promise((resolve, reject) => {

            function callBack(type) {
                try {
                    let res = type(self.PromiseResult);
                    if (res instanceof Promise) {
                        res.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        })
                    } else {
                        resolve(res)
                    }
                } catch (e) {
                    reject(e)
                }
            }

            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    callBack(onResolved);
                })
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    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);
    }
    // static 表明此方法是属于类的，而不是属于实例对象的
    // 添加Promise.resolve方法
    static resolve = function (value) {
        // 返回Promise对象
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(value);
                }, r => {
                    reject(value);
                })
            } else {
                resolve(value);
            }
        });
    }

    // 添加Promise.reject方法
    static reject = function (reason) {
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {
            reject(reason);
        });
    }

    // 添加Promise.all方法
    static all = function (promises) {
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {
            // 记录成功的Promise个数
            let count = 0;
            // 保存每个成功的结果
            let arr = [];
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    count++;
                    arr[i] = v;
                    if (count === promises.length) {
                        resolve(arr);
                    }
                }, r => {
                    reject(r)
                });
            }
        });
    }
    // 添加Promise.race方法
    static race = function (promises) {
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                // 谁跑得快，谁改变状态
                promises[i].then(v => {
                    resolve(v);
                }, r => {
                    reject(r);
                });
                // 改变状态后，后面进来的都没必要执行了，直接break
                break;
            }
        });
    }
}

    • 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
  • 相关阅读:
    thinkphp6控制器不存在appcontrollerAdmin问题解析及解决
    【JavaEE进阶系列 | 从小白到工程师】JavaEE中的枚举类使用介绍
    stm32----ADC模数转换
    隆云通楼宇二氧化碳传感器
    蓝桥杯嵌入式STM32G431RBT6知识点（主观题部分）
    【Linux】/proc/meminfo获取的参数信息分别是什么意思呐？
    有什么最受欢迎的干葡萄酒选择？
    黑豹程序员-架构师学习路线图-百科：HTML-网页三剑客
    ASEMI光伏二极管TPA3045参数，TPA3045规格，TPA3045图片
    Lua03——开发环境搭建
  • 原文地址：https://blog.csdn.net/cjhxydream/article/details/126020498