Promises 的手动实现

最新推荐文章于 2023-07-19 16:38:52 发布
小程的坏习惯
最新推荐文章于 2023-07-19 16:38:52 发布
阅读量131
点赞数 1
分类专栏：面试前端工程师 js 文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/weixin_68903201/article/details/127120126
版权
前端工程师同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
8 篇文章 0 订阅
订阅专栏
面试
7 篇文章 0 订阅
订阅专栏
<!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>Document</title>
</head>

<body>
    <!-- <script>
        class Promises {
            constructor(item) {
                console.log(12);
                // 存放状态
                // 接受类里面的参数
            }
            // 方法写到类上
        }

        new Promises(() => {

        })
    </script> -->
    <!-- <script>
        class Promises {
            constructor(executor) {
                console.log(executor, 12);
                // 存放状态
                // 接受类里面的参数
            }
            // 方法写到类上
        }

        new Promises(() => {

        })
    </script> -->
    <!-- <script>
        class Promises {
            constructor(executor) {
                // console.log(executor, 12);
                // 存放状态
                // 接受类里面的参数
                const resolve = () => {
                    console.log('成功执行了resolve');

                }

                executor(resolve, 34)
            }

            // 方法写到类上
        }

        new Promises((resolve, reject) => {
            // console.log(resolve, reject,'ccc');
            resolve(12)
        })
    </script> -->
    <!-- <script>
        class Promises {
            constructor(executor) {
                // console.log(executor, 12);
                // 存放状态
                // 接受类里面的参数
                const resolve = () => {
                    console.log('成功执行了resolve');
                }
                const reject = () => {
                    console.log('成功执行了reject');
                }
                executor(resolve, reject)
            }
            // 方法写到类上
        }

        new Promises((resolve, reject) => {
            // console.log(resolve, reject,'ccc');
            // resolve(12)
            reject('404')
        })
    </script> -->
    <!-- <script>
        class Promises {
            constructor(executor) {
                // console.log(executor, 12);
                // 存放状态
                // 接受类里面的参数
                const resolve = () => {
                    console.log('成功执行了resolve');
                }
                const reject = () => {
                    console.log('成功执行了reject');
                }
                executor(666, 999)
            }
            // 方法写到类上
        }

        new Promises((resolve, reject) => {
            console.log(resolve, reject,'ccc');
            // resolve(12)
            // reject('404')
        })
    </script> -->

    <!-- <script>
            // 都执行了 resolve, reject  这两个函数  ，所有是错误的
        class Promises {
            constructor(executor) {
                // console.log(executor, 12);
                // 存放状态
                // 接受类里面的参数
                const resolve = (value) => {
                    console.log('成功执行了resolve');
                }
                const reject = (value) => {
                    console.log('失败执行了reject');
                }
                executor(resolve, reject)
            }
            // 方法写到类上
        }

        new Promises((resolve, reject) => {
            console.log(resolve, reject,'ccc');
            resolve(12)
            reject('404')
        })
    </script> -->

    <!-- <script>
        class Promises {
            constructor(executor) {
                this.state = 'pendding' // 进行中  pendding
                this.value = ''  //存放成功状态
                this.reason = ''  //存放失败状态
                // console.log(executor, 12);
                // 存放属性
                // 接受类里面的参数
                const resolve = (value) => {
                    if (this.state === 'pendding') {
                        console.log('成功执行了resolve', value);
                        this.state = "fulfilled"
                        this.value = value
                    }
                }
                const reject = (err) => {
                    if (this.state === 'pendding') {
                        console.log('失败执行了reject', err);
                        this.state = "rejected"
                        this.reason = err
                    }
                }
                executor(resolve, reject)
            }
            // 方法写到类上
        }

        new Promises((resolve, reject) => {
            // console.log(resolve, reject, 'ccc');
            // 谁在前面执行谁的，且每次只执行一个
            // 定时器   是异步所有不会执行成功resolve;  而执行 没有异步的 rekect
            setTimeout(() => {
                resolve(12)
            }, 2000)
            reject('404')
        })
    </script> -->
    <!-- <script>
        class Promises {
            constructor(executor) {
                this.state = 'pendding' // 进行中  pendding   成功  fulfilled
                this.value = ''  //存放成功状态
                this.reason = ''  //存放失败状态
                const resolve = (value) => {
                    if (this.state === 'pendding') {
                        console.log('成功执行了resolve', value);
                        this.state = "fulfilled"
                        this.value = value
                    }
                }
                const reject = (err) => {
                    if (this.state === 'pendding') {
                        console.log('失败执行了reject', err);
                        this.state = "rejected"
                        this.reason = err
                    }
                }
                executor(resolve, reject)
            }
            // 方法写到类上
            then(onResolve, onReject) {
                // console.log(this.state);
                if (this.state === 'fulfilled') {
                    onResolve(this.value)
                }
                if (this.state === 'rejected') {
                    onResolve(this.reason)
                }
            }
        }

        let p1 = new Promises((resolve, reject) => {
            // resolve(12)
            // reject('404')
        })


        p1.then((res) => {
            // 成功
            console.log(res, 99888);
        }, (err) => {
            console.log(`当前错误为${err}`);
        })
    </script> -->
    <script>
        class Promises {
            constructor(executor) {
                this.state = 'pendding' // 进行中  pendding   成功  fulfilled
                this.value = ''  //存放成功状态
                this.reason = ''  //存放失败状态
                this.onResolveCallBack = [];  // 存放成功的数组
                this.onRejectCallBack = [];  // 存放失败的数组
                const resolve = (value) => {
                    if (this.state === 'pendding') {
                        console.log('成功执行了resolve', value);
                        this.state = "fulfilled"
                        this.value = value
                        this.onResolveCallBack.forEach((fn) => fn())
                    }
                }
                const reject = (err) => {
                    if (this.state === 'pendding') {
                        console.log('失败执行了reject', err);
                        this.state = "rejected"
                        this.reason = err
                        this.onRejectCallBack.forEach((fn) => fn())
                    }
                }
                executor(resolve, reject)
            }
            // 方法写到类上
            then(onResolve, onReject) {
                // console.log(this.state);
                if (this.state === 'fulfilled') {
                    onResolve(this.value)
                }
                if (this.state === 'rejected') {
                    onResolve(this.reason)
                }
                if (this.state === 'pendding') {
                    // 单独处理
                    // 将所有的成功函数存放到数组里面
                    this.onResolveCallBack.push(() => {
                        onResolve(this.value);
                    })
                    this.onRejectCallBack.push(() => {
                        onReject(this.reason);
                    })
                }
            }
        }

        let p = new Promises((resolve, reject) => {
            setTimeout(() => {
                // resolve(12)
                reject('404')

            }, 2000)
        })


        p.then((res) => {
            // 成功
            console.log(res, 007);
        }, (err) => {
            console.log(err, 404);
        })
        p.then((res) => {
            // 成功
            console.log(res, 007);
        }, (err) => {
            console.log(err, 404);
        })
        p.then((res) => {
            // 成功
            console.log(res, 007);
        }, (err) => {
            console.log(err, 404);
        })
        p.then((res) => {
            // 成功
            console.log(res, 007);
        }, (err) => {
            console.log(err, 404);
        })
        p.then((res) => {
            // 成功
            console.log(res, 007);
        }, (err) => {
            console.log(err, 404);
        })

    </script>
</body>

</html>