如何用原生JS实现一个简单的promise

时间 2019-11-17

标签如何原生实现一个简单 promise 栏目 JavaScript 繁體版

原文原文链接

　　　我又又又回来了，最近真是累的跟狗同样，急需一个大保健回复一会儿精力html

　　　我如今是一边喝着红牛一边写着博客，好了好了，不扯了，回归总体好吧ajax

　　　先简单来讲一下啥是promise吧数组

　　　它是什么？Promise是一个方案，用来解决多层回调嵌套的解决方案。它如今是ES6的原生对象。promise

　　干吗用的？能够把一个多层嵌套的同步、异步都有回调的方法，给拉直为一串.then()组成的调用链。异步

　　　解决啥问题？多层嵌套的回调方法中，若是同时存在同步、异步的方法，那么实际执行顺序会混乱。很差调试很差维护函数

　　　如今咱们再来讲一说本身写简单的promise的思路，咱们是如何将异步函数同步执行的呢，正常状况下，咱们只须要用函数ui

　　　嵌套就能够解决，可是如今咱们要封装一个promise，那咱们要怎么作呢，其实原理仍是同样的，只要能在第一个函数执行完this

　　　再调用下一个函数不就能够了嘛 spa

　　　下面仍是直接上代码调试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        function MyPromise(func) {
            var self = this;
            var count = 0;
            this.cbklist = [];
            this.then = function (callback) {
                //将全部.then方法传进来的参数push到数组当中
                this.cbklist.push(callback);
                //能实现链式调用的关键
                return this;
            }
            this.success = function () {
                //使用递归调用自身
                if (count == self.cbklist.length) return;
                self.cbklist[count++](self.success);

            }
            //进来时调用第一个函数
            func(self.success);
        }


        // 下面是调用的例子
        function ajaxA(success) {
            setTimeout(function () {
                console.log("AAAAAAAAAA");
                success();
            }, 3000);
        }

        function ajaxB(success) {
            setTimeout(function () {
                console.log("BBBBBBBBBB");
                success();
            }, 2000);
        }

        function ajaxC(success) {
            setTimeout(function () {
                console.log("CCCCCCCCCC");
                success();
            }, 6000);
        }

        function ajaxD() {
            setTimeout(function () {
                console.log("DDDDDDDDD");
            }, 2000);
        }
        new MyPromise(ajaxA).then(ajaxB).then(ajaxC).then(ajaxD);
    </script>
</body>

</html>