首页 > 其他分享 >手写Promise教程_then方法

手写Promise教程_then方法

时间:2023-05-12 16:46:58浏览次数:37  
标签:教程 resolve PromiseState promise result reject Promise 手写

手写Promise教程_then方法

1、Promise结构分析

console.log(new Promise((resolve, reject) => {}));

通过打印Promise的实例对象,观察promise的对象结构:

image

分析上图,可以得出一些信息:

  • 1、promise实例对象上有PromiseState属性和PromiseResult属性
  • 2、Promise构造函数上有all方法、race方法、resolve方法、reject方法。
  • 3、Promise构造函数的原型对象上有then方法、catch方法。

这些是Promise最核心的属性和方法,手写Promise也就是去实现它们的功能。

2、构造函数

创建一个promise_test.js文件,被在html文件中中引入:

index.html:

<!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_test.js"></script>
</head>
<body>
    <script>
        new Promise((resolve, reject) => {});
    </script>
</body>
</html>

promise_test.js:

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;

    executor(resolve, reject);
}

在promise_test.js文件中写上一个Promise构造函数,把JS为我们提供的原生Promise构造函数覆盖掉,然后运行代码,报错:

Uncaught ReferenceError: resolve is not defined。

为什么会出现这个错误呢?

因为在index.html中new Promise( 匿名函数(resolve, reject) ),作为实参传进来的匿名函数(resolve, reject),在构造函数内调用的时候,传入了resolve和reject实参方法,但构造函数中没有这两个方法,因此我们要在构造函数中定义resolve和reject这两个方法:

2.1、resolve 和 reject

功能分析:

  • 1、修改PromiseState的状态为fulfilled,并且PromiseState的状态只能修改一次。
  • 2、可以接收一个参数,将这个参数的值赋给PromiseResult。

index.html:

new Promise((resolve, reject) => { resolve('test'); });

promise_test.js:

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;

    // 定义resolve函数
    function resolve(data) {
      console.log(this.PromiseState); // undefined
    }

    executor(resolve, reject);
}

既然要修改PromiseState的值,那么我们先尝试获取这个值,构造函数中声明的是pending,但结果却是:undefined,为什么?

this的指向问题,我们在代码中打印了了一下this,结果:Window,为什么是Window?

这里复习一下this的指向,1、普通函数中的this指向window。2、构造函数中的this指向实例对象。3、箭头函数中的this指向父级作用域的this。

ok,如果知道了这两点的话,那么就可以知道如何解决:1、将this的指向作为一个属性保存下来。2、使用箭头函数。

这里选择保存this的指向:

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;

    // 保存实例对象的this值
    const _this = this;
    // 定义resolve函数
    function resolve(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'fulfilled'; // resolved
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
    }

    function reject(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'rejected'; // rejected
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
    }

    executor(resolve, reject);
}

index.html:

测试1:

const p = new Promise((resolve, reject) => { 
    resolve('success');
});
console.log(p);

结果1:Promise {PromiseState: 'fulfilled', PromiseResult: 'success'}

——

测试2:

const p = new Promise((resolve, reject) => { 
    reject('fail');
});
console.log(p);

结果2:Promise {PromiseState: 'rejected', PromiseResult: 'fail'}

——

经过测试,PromiseState和PromiseResult成功被修改!

3、then方法

3.1、功能分析

通过1的分析,我们可以得知then方法是放在原型对象上的,这样做的目的是为了通过实例对象调用.then进行链式调用

链式调用是Promise最重要的特性,它解决了回调地狱的问题,下面我们来分析一下then方法的功能:

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

它传入两个回调函数作为形参,onResolved作为PromiseState为fulfilled时的回调函数,onRejected作为PromiseState为rejected时的回调函数。

验证代码:

const p = new Promise((resolve, reject) => {
    // resolve将PromiseState状态改为了fulfilled
    resolve('success');
    // reject将PromiseState状态改为了rejected
    // reject('fail');
});

p.then(value => {
    // onResolved方法的回调函数,状态时fulfilled执行
    console.log(value); // success
}, reason => {
    // onRejected方法的回调函数,状态时rejected执行
    console.log(reason); // fail
});

2、then方法的返回值是一个新的promise对象,这个新的promise对象的结果状态由then指定的回调函数执行的返回值决定。

  • 如果then回调函数的返回值是:非Promise的数据。那么新promise的状态(PromiseState)是fulfilled,值(PromiseResult)是这个非Promise的数据。
  • 如果then回调函数的返回值是:Promise类型的数据,那么新的promise的状态(PromiseState)由返回值promise对象的状态决定,值(PromiseResult)也由它的值决定。
  • 如果抛出异常,新promise变成rejected,reason为抛出的异常。

验证代码:

const p = new Promise((resolve, reject) => {
    // resolve将PromiseState状态改为了fulfilled
    resolve('success');
    // reject将PromiseState状态改为了rejected
    // reject('fail');
});

const p2 = p.then(value => {
    // onResolved方法的回调函数,状态时fulfilled执行下面的代码
    // 返回值是value变量,非promise,也就是'success'
    // return value;
    // 返回值是promise对象
    return new Promise((resolve, reject) => {
        // 如果调用resolve,那么p2的PromiseStatus就是fulfilled,PromiseResult是success2
        resolve('success2');
        // 如果调用reject,那么p2的PromiseStatus就是rejected,PromiseResult是fail2
        // reject('fail2');
        // 如果抛出异常,那么p2的PromiseStatus就是rejected,PromiseResult是error
        // throw 'error';
    });
}, reason => {
    // onRejected方法的回调函数,状态时rejected执行下面的代码
    console.log(reason); // fail
});

console.log(p2);

3、链式调用,并且异步调用。

  • 1、then里面的代码,会按照链式调用的顺序,顺序执行。
  • 2、then里面的代码,是异步执行。

验证代码:

const p = new Promise((resolve, reject) => {
    resolve();
    console.log('111');
});

const p2 = p.then(value => {
    // 没有return返回值,默认是return undefined,这个也是非promise的数据,因此状态是fulfilled,值是undefined
    console.log('222');
}, reason => {
    console.log(reason); // fail
});

p2.then(value => {
    console.log('333');
});

console.log('444');

执行结果:111 444 222 333

可以看到,同步代码先执行,执行完之后再执行then中的异步代码,并且是按照链式操作的顺序执行下来。

以上就是then方法的功能分析,下面是手写实现:

3.2、功能实现

1、实现异步执行 + 判断返回值进行不同的操作

Promise.prototype.then = function(onResolved, onRejected) {
    // then函数的返回值是一个新的promise对象
    return new Promise((resolve, reject) => {
        // 如果实例对象上的PromiseState是fulfilled,执行onResolved
        if (this.PromiseState === 'fulfilled') {
            // 异步执行
            setTimeout(() => {
                try {
                    let result = onResolved(this.PromiseResult);
                    // 如果返回值是promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        // 如果返回值是非promise对象
                        resolve(result);
                    }
                } catch (e) {
                    // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                    reject(e);
                }
            });
        }

        // 如果实例对象上的PromiseState是fulfilled,执行onRejected
        if (this.PromiseState === 'rejected') {
            // 异步执行
            setTimeout(() => {
                try {
                    let result = onRejected(this.PromiseResult);
                    // 如果返回值是promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        // 如果返回值是非promise对象
                        resolve(result);
                    }
                } catch (e) {
                    // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                    reject(e);
                }
            });
        }
    });
}

上述代码看似可以完美实现,但是却存在一个缺陷,以下是测试index.html:

const p = new Promise((resolve, reject) => {
    // 如果这里是异步的,出现bug:永远不会触发then方法
    setTimeout(() => {
        resolve('111');
    }, 1000);
});

const p2 = p.then(value => {
    console.log('then中:' + value);
}, reason => {
    console.log(reason);
});

上述测试,及时是等一秒甚至一百秒,then方法中的回调也不会执行,为什么?

因为这个时候p这个对象中的promiseState还处于pending状态,所以我们要在then方法中加上第三种情况,pending。

做法是:将回调函数保存起来,在resolve和reject方法中去调用,如此就可以实现链式调用

2、链式调用的实现

promise_test.js:

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;
    // 用于保存回调函数的数组
    this.callbacks = [];

    // 保存实例对象的this值
    const _this = this;
    // 定义resolve函数
    function resolve(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'fulfilled'; // fulfilled
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
        // 3、调用异步任务下,成功的回调函数
        setTimeout(() => {
            _this.callbacks.forEach(item => {
                item.Resolved(data);
            });
        });
    }

    function reject(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'rejected'; // rejected
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
        // 3、调用异步任务下,失败的回调函数
        setTimeout(() => {
            _this.callbacks.forEach(item => {
                item.Rejected(data);
            });
        });
    }

    executor(resolve, reject);
}

Promise.prototype.then = function(onResolved, onRejected) {
    // then函数的返回值是一个新的promise对象
    return new Promise((resolve, reject) => {
        // 如果实例对象上的PromiseState是fulfilled,执行onResolved
        if (this.PromiseState === 'fulfilled') {
            // 异步执行
            setTimeout(() => {
                try {
                    let result = onResolved(this.PromiseResult);
                    // 如果返回值是promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        // 如果返回值是非promise对象
                        resolve(result);
                    }
                } catch (e) {
                    // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                    reject(e);
                }
            });
        }

        // 如果实例对象上的PromiseState是rejected,执行onRejected
        if (this.PromiseState === 'rejected') {
            // 异步执行
            setTimeout(() => {
                try {
                    let result = onRejected(this.PromiseResult);
                    // 如果返回值是promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        // 如果返回值是非promise对象
                        resolve(result);
                    }
                } catch (e) {
                    // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                    reject(e);
                }
            });
        }

        // 如果new Promise中的函数是异步的,例如一秒之后再调用resolveo或者reject的情况
        // 后续的新promise对象的状态都是pending,都会走这里。
        // 我们就将回调函数保存起来,在resolve和reject方法中去调用
        if (this.PromiseState === 'pending') {
            // 注意保存一下this的指向,因为下面两个都是普通函数,内部的this指向是window
            const _this = this;

            function Resolved() {
                try {
                    let result = onResolved(_this.PromiseResult);
                    // 如果返回值是promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        // 如果返回值是非promise对象
                        resolve(result);
                    }
                } catch (e) {
                    // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                    reject(e);
                }
            }

            function Rejected() {
                try {
                    let result = onRejected(_this.PromiseResult);
                    // 如果返回值是promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        });
                    } else {
                        // 如果返回值是非promise对象
                        resolve(result);
                    }
                } catch (e) {
                    // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                    reject(e);
                }
            }

            this.callbacks.push({
                Resolved,
                Rejected
            });
        }
    });
}

3、链式调用的实现_代码优化

可以看出,上述有很多重复代码,是为了更好帮助理解,故意的。

以下则是优化后的代码promise_test.js:

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;
    // 用于保存回调函数的数组
    this.callbacks = [];

    // 保存实例对象的this值
    const _this = this;
    // 定义resolve函数
    function resolve(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'fulfilled'; // fulfilled
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
        // 3、调用异步任务下,成功的回调函数
        setTimeout(() => {
            _this.callbacks.forEach(item => {
                item.Resolved(data);
            });
        });
    }

    function reject(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'rejected'; // rejected
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
        // 3、调用异步任务下,失败的回调函数
        setTimeout(() => {
            _this.callbacks.forEach(item => {
                item.Rejected(data);
            });
        });
    }

    executor(resolve, reject);
}

Promise.prototype.then = function(onResolved, onRejected) {
    // 注意保存一下this的指向,因为下面普通函数,内部的this指向是window
    const _this = this;
    // then函数的返回值是一个新的promise对象
    return new Promise((resolve, reject) => {
        function handler(func) {
            try {
                let result = func(_this.PromiseResult);
                // 如果返回值是promise对象
                if (result instanceof Promise) {
                    result.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    });
                } else {
                    // 如果返回值是非promise对象
                    resolve(result);
                }
            } catch (e) {
                // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                reject(e);
            }
        }

        // 如果实例对象上的PromiseState是fulfilled,执行onResolved
        if (this.PromiseState === 'fulfilled') {
            // 异步执行
            setTimeout(() => {
                handler(onResolved);
            });
        }

        // 如果实例对象上的PromiseState是rejected,执行onRejected
        if (this.PromiseState === 'rejected') {
            // 异步执行
            setTimeout(() => {
                handler(onRejected);
            });
        }

        // 如果new Promise中的函数是异步的,例如一秒之后再调用resolveo或者reject的情况
        // 后续的新promise对象的状态都是pending,都会走这里。
        // 我们就将回调函数保存起来,在resolve和reject方法中去调用
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                Resolved: () => {
                    handler(onResolved);
                },
                Rejected: () => {
                    handler(onRejected);
                }
            });
        }
    });
}

测试代码index.html:

const p = new Promise((resolve, reject) => {
    // 开启异步
    // setTimeout(() => {
        // resolve('ok');
        reject('no');
    // });
});

p.then(value => {
    console.log(111);
}, reason => {
    // 如果返回值是非promise类型的数据
    return reason;
})
.then(value => {
    console.log(value); // 'no'
    // 如果返回值是promise类型的数据
    return new Promise((resolve, reject) => {
        resolve(333);
    });
}, reason => {
    // ...
})
.then(value => {
    console.log('收到的值是:', value); // 333
    // 如果抛出异常
    throw 'error'
})
.then(() => {
    // ...
}, reason => {
    console.log(reason); // error
})
// 如果then中是空值,什么也不传,出现bug!!!
.then()
.then(() => {
    console.log('我的上一个then是空值,我还可以输出吗?');
});

最后的测试,如果then中是空值,什么也不传,出现bug!!!

4、值的穿透

解决:

Promise.prototype.then = function(onResolved, onRejected) {
    // 注意保存一下this的指向,因为下面普通函数,内部的this指向是window
    const _this = this;
    // 判断回调函数参数
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }
    .....

当我们不在 then 中放入参数,例:promise.then().then(),那么其后面的 then 依旧可以得到之前 then 返回的值,这叫做值的穿透

4、完整代码示例

写这个then方法,被这个then方法折磨了一整天了,中途踩了一些巨坑。

关于Promise的手写教程就先写到这里吧,catch、all、race、resolve、reject等方法的实现,会在下一篇博客中进行讲解。

这些方法相对then方法来说就简单得多了。

如果关于本篇文章有什么问题的话,可以私信我,谢谢阅读。

function Promise(executor) {
    // 添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = undefined;
    // 用于保存回调函数的数组
    this.callbacks = [];

    // 保存实例对象的this值
    const _this = this;
    // 定义resolve函数
    function resolve(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'fulfilled'; // fulfilled
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
        // 3、调用异步任务下,成功的回调函数
        setTimeout(() => {
            _this.callbacks.forEach(item => {
                item.Resolved(data);
            });
        });
    }

    function reject(data) {
        // 判断状态,promise状态只能更改一次
        if (_this.PromiseState !== 'pending') return;
        // 1、修改对象的状态(promiseState)
        _this.PromiseState = 'rejected'; // rejected
        // 2、设置对象的结果值(promiseResult)
        _this.PromiseResult = data;
        // 3、调用异步任务下,失败的回调函数
        setTimeout(() => {
            _this.callbacks.forEach(item => {
                item.Rejected(data);
            });
        });
    }

    try {
        executor(resolve, reject);
    } catch (e) {
        reject(e);
    }
}

Promise.prototype.then = function(onResolved, onRejected) {
    // 注意保存一下this的指向,因为下面普通函数,内部的this指向是window
    const _this = this;
    // 判断回调函数参数
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }
    // then函数的返回值是一个新的promise对象
    return new Promise((resolve, reject) => {
        function handler(func) {
            try {
                let result = func(_this.PromiseResult);
                // 如果返回值是promise对象
                if (result instanceof Promise) {
                    result.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    });
                } else {
                    // 如果返回值是非promise对象
                    resolve(result);
                }
            } catch (e) {
                // 如果抛出异常,新promise变成rejected,reason为抛出的异常。
                reject(e);
            }
        }

        // 如果实例对象上的PromiseState是fulfilled,执行onResolved
        if (this.PromiseState === 'fulfilled') {
            // 异步执行
            setTimeout(() => {
                handler(onResolved);
            });
        }

        // 如果实例对象上的PromiseState是rejected,执行onRejected
        if (this.PromiseState === 'rejected') {
            // 异步执行
            setTimeout(() => {
                handler(onRejected);
            });
        }

        // 如果new Promise中的函数是异步的,例如一秒之后再调用resolveo或者reject的情况
        // 后续的新promise对象的状态都是pending,都会走这里。
        // 我们就将回调函数保存起来,在resolve和reject方法中去调用
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                Resolved: () => {
                    handler(onResolved);
                },
                Rejected: () => {
                    handler(onRejected);
                }
            });
        }
    });
}

标签:教程,resolve,PromiseState,promise,result,reject,Promise,手写
From: https://www.cnblogs.com/luckest/p/17395072.html

相关文章

  • mysql8.0.33的安装教程
    1、1 MySQL有四种不同的版本:community版、standard版、enterprise版和cluster版。Community版Community版是MySQL最常用的免费版本,它是基于GPL(GNU通用公共许可证)许可协议发布的。它是开源的,可以利用社区的贡献来维护和改进。有非常多的支持和帮助,可以从官方网站下载。Standar......
  • 手写promise
    constPENDING='pending'constFULFILLED='fullfilled'constREJECTED='rejected'classMyPromise{state=PENDINGresult=undefinedhandlers=[]constructor(executor){constresolve=(data)=>{......
  • Python菜鸟教程
    Python菜鸟教程是一份非常流行的Python编程入门教程,适合初学者学习Python编程语言。它包含了丰富的示例代码和练习,让初学者可以快速地入门Python编程。该教程包括以下内容:1.Python基础知识:介绍Python语言的基础知识,如变量、数据类型、运算符、控制流程语句等。2.Python函数:讲解Pyth......
  • ElasticSearch 8.x 教程
    ElasticSearch8.x教程ElasticSearch概述Lucene是什么?Lucene是一套信息检索工具包,jar包,不包含搜索引擎系统包含:索引结构,读写索引的工作,排序、搜索规则工具类ElasticSearch(es)是什么?一个开源的高扩展的分布式的全文搜索引擎可以近乎实时存储、检索数据......
  • pytest-playwright基础教程(二)-使用codegen自动生成测试代码
    pytest-playwright基础教程(二)-使用codegen自动生成测试代码完整流程1.使用codegen打开测试网址在终端输入如下命令playwrightcodegendemo.playwright.dev/todomvc这边测试网址用的官方提供的测试网址输入命令后,按回车,打开codegen图形化界面他会打开两个页面,一个是......
  • flink流计算框架 使用(详细教程)
    按照Apache官方的介绍,Flink是一个对有界和无界数据流进行状态计算的分布式处理引擎和框架。通俗地讲,Flink就是一个流计算框架,主要用来处理流式数据。其起源于2010年德国研究基金会资助的科研项目“Stratosphere”,2014年3月成为Apache孵化项目,12月即成为Apache顶级项目。Flinken在......
  • AI歌手模型使用及训练教程
    来源:公众号 歸藏的AI工具箱前几天在B站刷到AI孙燕姿唱的《黑色毛衣》,让我听傻了,还原度还能这么高的。于是就研究了一下,做了几段居然效果还行,可以在这里听《爱得太迟》。简单解释一下,这个项目分为两个部分,模型的使用和模型的训练,模型使用的话对电脑的要求不是很高基本上差不多点......
  • 老毛子开启端口转发教程
    第一步打开防火墙设置如下开关.如何使用手动端口转发进入路由器后台管理界面->高级设置 ->外部网络 ->端口转发,出现如下界面:这里顺便说一下UPnP这个功能:全自动的、由局域网内的应用自动申请本页指定的端口范围内的端口转发,一般游戏和P2P软件会自动申请端口转发,有时候内网......
  • 手写Promise
    //计录Promise的三种状态constPENDING="pending";constFULFILLED="fulfilled";constREJECTED="rejected";//创建微队列,把传递的函数放到微队列functionrunMicroTask(callback){ if(process&&process.nextTick){  process.nextTick(c......
  • 如何手写一个promise函数
    constPENDING='pending'constFULFILLED='fulfilled'constREJECT='rejected';classMyPromise{#state=PENDING#result=undefined#handler=[]constructor(executor){constresolve=(data)......