如何用原生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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。