美文网首页
es6中 --使用 js 实现原生Promise

es6中 --使用 js 实现原生Promise

作者: SystemLight | 来源:发表于2020-03-25 14:01 被阅读0次

代码实现

class MyPromise {

    constructor(callback) {
        this.resolveHandlers = [];
        this.rejectHandlers = [];

        this.status = "pending";

        callback(this._resolve, this._reject);
    }

    _reject = (val) => {
        if (this.status !== "pending") {
            return;
        }
        this.status = "rejected";
        this.observer(() => {
            // 推入微任务队列
            while (this.rejectHandlers.length) {
                this.rejectHandlers.shift()(val);
            }
        });
    };

    _resolve = (val) => {
        if (this.status !== "pending") {
            return;
        }
        this.status = "resolved";
        this.observer(() => {
            // 推入微任务队列
            while (this.resolveHandlers.length) {
                this.resolveHandlers.shift()(val);
            }
        });
    };

    observer(microTask) {
        let ob = new MutationObserver(function () {
            microTask();
            ob.disconnect();
            ob = null;
        });
        ob.observe(document.body, {
            attributes: true
        });
        document.body.setAttribute("promise", Math.random().toString());
    }

    then(resolveTask, rejectTask) {
        // return nextMyPromise
        let nowMyPromise = this;
        return new MyPromise((nextResolve, nextReject) => {

            nowMyPromise.resolveHandlers.push(nowResolveVal => {
                if (typeof resolveTask === "function") {
                    nowResolveVal = resolveTask(nowResolveVal);
                    // 返回一个MyPromise对象时
                    if (nowResolveVal instanceof MyPromise) {
                        return nowResolveVal.then(nextResolve, nextReject)
                    }
                    // 返回一个thenable对象时,即含有then函数的对象时,用于替换掉底下通过then方法注册的resolveTask
                    if (typeof nowResolveVal === "object" && typeof nowResolveVal.then === "function") {
                        return nowResolveVal.then();
                    }
                }
                nextResolve(nowResolveVal);
            });

            nowMyPromise.rejectHandlers.push(nowRejectVal => {
                if (typeof rejectTask === "function") {
                    nowRejectVal = rejectTask(nowRejectVal);
                    // 返回一个MyPromise对象时
                    if (nowRejectVal instanceof MyPromise) {
                        return nowRejectVal.then(nextResolve, nextReject)
                    }
                    // 返回一个thenable对象时,即含有then函数的对象时,用于替换掉底下通过then方法注册的resolveTask
                    if (typeof nowRejectVal === "object" && typeof nowRejectVal.then === "function") {
                        return nowRejectVal.then();
                    }
                }
                nextReject(nowRejectVal);
            });

        });
    }

    catch(rejectTask) {
        return this.then(undefined, rejectTask);
    }

    finally(finallyTask) {
        let __finally = (val) => {
            finallyTask();
            return val;
        };
        return this.then(__finally, __finally);
    }

    static resolve(val) {
        return new MyPromise((resolve, reject) => {
            resolve(val);
        })
    }

    static reject(val) {
        return new MyPromise((resolve, reject) => {
            reject(val);
        })
    }

    static all(promiseList) {
        let resultList = [];
        let n = 0;
        let size = promiseList.length;
        return new MyPromise((resolve, reject) => {
            for (let i = 0; i < promiseList.length; i++) {
                promiseList[i].then(val => {
                    n++;
                    resultList[i] = val;
                    if (n === size) {
                        resolve(resultList);
                    }
                });
            }
        });
    }

}

更多推荐:https://github.com/januwA/future.js

相关文章

  • es6中 --使用 js 实现原生Promise

    代码实现 更多推荐:https://github.com/januwA/future.js

  • javaScript基础知识

    冴羽写博客 JavaScript深入系列ES6中promise如何实现 自我总结的JS javascript知识体...

  • 八(1)、Promise(周) ------ 2020-02-2

    1、什么是Promise: 2、通过原生JS实现简单的Promise原理,理解Promise如何管控异步编程: 3...

  • js原生实现promise

    Promise构造函数接受一个函数作为参数,函数里面有两个参数resolve和reject分别作为执行成功或者执行...

  • 实现 Promise/A+ 规范 & ES6 Promise方法

    实现 Promise/A+ 规范 检测通过 实现 ES6 Promise 方法

  • Promise

    Promise Promise 是异步编程的一种解决方案,es6中统一器用法,原生提供了promise对象 Pro...

  • 用 ES6 写全屏滚动插件

    这篇文章将介绍如何使用原生 JS (主要使用 ES6 语法)实现全屏滚动插件,兼容 IE 10+、手机触屏,Mac...

  • JS的http通信工具:axios

    基于Promise的HTTP库,用于发送Ajax,用简单的使用方法实现原生JS的xhr的功能,并且前后端皆可用 准...

  • js sleep

    // promise 在ES6的语法中,Promise是sleep方法异步的实现一种方式,借助Promise方法可...

  • Promise简单使用

    ES6原生提供了Promise对象。所谓Promise,就是Node中的一个对象,用来传递异步操作的消息。 Pro...

网友评论

      本文标题:es6中 --使用 js 实现原生Promise

      本文链接:https://www.haomeiwen.com/subject/trgtuhtx.html