不要溫柔地走入promise - samwu－IT工程師數位筆記本

文章出處

第一步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>鏈式化</title>
        <script type="text/javascript">
            (function(){
                function Promise(fn){
                    var instance = this;
                    instance["_value"] = "";
                    
                    
                    var resolve = function(val){
                        instance["_value"] = val;
                    };
                    
                    fn(resolve);
                }
                var promise_proto = Promise.prototype;
                
                promise_proto.then = function(successFn){
                    var instance = this;
                    
                    return new Promise(function(resolve){
                        var resolveWrapper = function(val){
                            var ret = successFn(val);
                            if(typeof(ret) != "undefined" && ret.constructor === Promise){
                                ret.then(function(info){
                                    resolve(info);
                                });
                            }
                            else{
                                return ret;
                            }
                        }
                        
                        resolveWrapper(instance["_value"]);
                    });
                };
                window.Promise = Promise;
            })();
                
            
            (function(){
                return new Promise(function(resolve){
                    resolve(1);
                })
            })()
            .then(function(info){
                 return new Promise(function(resolve){
                     console.log(info);
                      resolve(2);
                 })
            })
            .then(function(info){
                console.log(info);
            });
        </script>
    </head>
    <body>
        new Promise返回一個新空間P1，
        P1里面有匿名函數function(resolve){resolve(1);}) 和 匿名函數 function(info){
              console.log(info);
              return new Promise(function(resolve){
                  resolve(2);
              })
            }
        P1運動方式：
        1.內部生成resolve函數，并注入到第一個匿名函數，也就是resolve(1)。執行resolve(1)，也就是把1賦值給P1里面的一個變量_value。
        2.把_value注入到第二個匿名函數,然后執行第二個匿名函數，根據第二個匿名函數返回是否為Promise類型，來覺得下一步。
    </body>
</html>

第二步

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>promise化</title>
        <!--<script src="promise.js" type="text/javascript"></script>-->
        <script type="text/javascript">
            (function() {
                var PENDING = 0,
                    RESOLVED = 1,
                    Promise = function(fn) {
                        var instance = this;
                        instance["_value"] = "",
                        resolve = function(val) {
                            instance.resolve(val);
                        };
                        instance["_status"] = PENDING;
                        instance["_onResolved"] = [];
                        fn(resolve);
                    },
                    promise_proto = Promise.prototype;
                promise_proto.then = function(successFn) {
                    var instance = this;
                    // 返回一個新的Promise實例
                    return new Promise(function(resolve) {
                        var resolveWrapper = function(val) {
                            // 執行than傳入的successFn
                            var ret = successFn(val);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve(info);
                                });
                            } else {
                                resolve(ret);
                            }
                        };
                        // 這里的instance是上一個Promise實例
                        instance._onResolved.push(resolveWrapper);
                        // 上一個instance已經resolve執行了，
                        if (instance._status === RESOLVED) {
                            resolveWrapper(instance._value);
                        }
                    });
                };
                promise_proto.resolve = function(val) {
                    if (this._status === PENDING) {
                        this._status = RESOLVED;
                        this._value = val;
                        for (var i = 0, len = this._onResolved.length; i < len; i++) {
                            this._onResolved[i](val);
                        }
                    }
                };
                window.Promise = Promise;
            })();
            
            
            (function() {
                return new Promise(function(resolve) {
                    console.log(0);
                    setTimeout(function() {
                        resolve(1);
                    }, 3000);
                })
            })()
            .then(function(info) {
                console.log(info);
                return new Promise(function(resolve) {
                    setTimeout(function(){
                        resolve(2);
                    },2000);
                    
                })
            })
            .then(function(info) {
                console.log(info);
            });
        </script>
    </head>

    <body>
    </body>

</html>

第三步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>all函數</title>
        <!--<script src="promise.js" type="text/javascript"></script>-->
        <script type="text/javascript">
            (function() {
                var PENDING = 0,
                RESOLVED = 1,
                Promise = function(fn) {
                    var instance = this;
                    instance["_value"] = "",
                    resolve = function(val) {
                        instance.resolve(val);
                    };
                    instance["_status"] = PENDING;
                    instance["_onResolved"] = [];
                    fn(resolve);
                },
                promise_proto = Promise.prototype;
                    
                promise_proto.then = function(successFn) {
                    var instance = this;
                    // 返回一個新的Promise實例
                    return new Promise(function(resolve) {
                        var resolveWrapper = function(val) {
                            // 執行than傳入的successFn
                            var ret = successFn(val);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve(info);
                                });
                            } else {
                                resolve(ret);
                            }
                        };
                        // 這里的instance是上一個Promise實例
                        instance._onResolved.push(resolveWrapper);
                        // 上一個instance已經resolve執行了，
                        if (instance._status === RESOLVED) {
                            resolveWrapper(instance._value);
                        }
                    });
                };
                promise_proto.resolve = function(val) {
                    if (this._status === PENDING) {
                        this._status = RESOLVED;
                        this._value = val;
                        for (var i = 0, len = this._onResolved.length; i < len; i++) {
                            this._onResolved[i](val);
                        }
                    }
                };
                Promise.all = function (arr) {
                    return new Promise(function (resolve) {
                        var len = arr.length,
                            i = -1,
                            count = 0,
                            results = [];
                        while (++i < len) {
                            ~function (i) {
                                arr[i].then(
                                    function (val) {
                                        results[i] = val;
                                        if (++count === len) {
                                            resolve(results);
                                        }
                                    },
                                    function () {
                                        console.log("沒有執行完");
                                    }
                                );
                            }(i);
                        }
                    });
                };
                window.Promise = Promise;
            })();
        </script>
        <script type="text/javascript">
            var a1 = new Promise(function(resolve,reject){
                resolve(1);
            });
            
            var a2 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(2);
                },2000)
                    
            });
            
            var a3 = new Promise(function(resolve,reject){
                resolve(3);
            });
            
            Promise.all([a1,a2,a3]).then(function(value){
                console.log(value);
            });
        </script>
    </head>
    <body>
    </body>
</html>

第四步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>race函數</title>
        <!--<script src="promise.js" type="text/javascript"></script>-->
        <script type="text/javascript">
            (function() {
                var PENDING = 0,
                RESOLVED = 1,
                Promise = function(fn) {
                    var instance = this;
                    instance["_value"] = "",
                    resolve = function(val) {
                        instance.resolve(val);
                    };
                    instance["_status"] = PENDING;
                    instance["_onResolved"] = [];
                    fn(resolve);
                },
                promise_proto = Promise.prototype;
                    
                promise_proto.then = function(successFn) {
                    var instance = this;
                    // 返回一個新的Promise實例
                    return new Promise(function(resolve) {
                        var resolveWrapper = function(val) {
                            // 執行than傳入的successFn
                            var ret = successFn(val);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve(info);
                                });
                            } else {
                                resolve(ret);
                            }
                        };
                        // 這里的instance是上一個Promise實例
                        instance._onResolved.push(resolveWrapper);
                        // 上一個instance已經resolve執行了，
                        if (instance._status === RESOLVED) {
                            resolveWrapper(instance._value);
                        }
                    });
                };
                promise_proto.resolve = function(val) {
                    if (this._status === PENDING) {
                        this._status = RESOLVED;
                        this._value = val;
                        for (var i = 0, len = this._onResolved.length; i < len; i++) {
                            this._onResolved[i](val);
                        }
                    }
                };
                Promise.all = function (arr) {
                    return new Promise(function (resolve) {
                        var len = arr.length,
                            i = -1,
                            count = 0,
                            results = [];
                        while (++i < len) {
                            ~function (i) {
                                arr[i].then(
                                    function (val) {
                                        results[i] = val;
                                        if (++count === len) {
                                            resolve(results);
                                        }
                                    },
                                    function () {
                                        console.log("沒有執行完");
                                    }
                                );
                            }(i);
                        }
                    });
                };
                Promise.race = function (arr) {
                    return new Promise(function (resolve, reject) {
                        var len = arr.length,
                            i = -1;
                        //  給每一個都套上then，誰先完成，先resolve 
                        while (++i < len) {
                            arr[i].then(
                                function (val) {
                                    resolve(val);
                                },
                                function (val) {
                                    reject(val);
                                }
                            );
                        }
                    });
                };
                window.Promise = Promise;
            })();
        </script>
        <script type="text/javascript">
            var a1 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(1);
                },5000)
                    
            });
            
            var a2 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(2);
                },2000)
                    
            });
            
            var a3 = new Promise(function(resolve,reject){
                resolve(3);
            });
            
            Promise.race([a1,a2,a3]).then(function(value){
                console.log(value);
            });
        </script>
    </head>
    <body>
    </body>
</html>

第五步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>加入reject函數</title>
        <!--<script src="promise.js" type="text/javascript"></script>-->
        <script type="text/javascript">
            (function() {
                var PENDING = 0,
                RESOLVED = 1,
                REJECTED = 2,
                Promise = function(fn) {
                    var instance = this;
                    instance["_value"] = "",
                    resolve = function(val) {
                        instance.resolve(val);
                    };
                    reject = function(val){
                        instance.reject(val);
                    }

                    instance["_status"] = PENDING;
                    instance["_onResolved"] = [];
                    instance["_onRejected"] = [];

                    fn(resolve, reject);
                },
                promise_proto = Promise.prototype;
                    
                promise_proto.then = function(successFn, failFn) {
                    var instance = this;
                    // 返回一個新的Promise實例
                    return new Promise(function(resolve, reject) {
                        var resolveWrapper = function(val) {
                            // 執行than傳入的successFn
                            var ret = successFn(val);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve(info);
                                },function(info){
                                    reject(info);
                                });
                            } else {
                                resolve(ret);
                            }
                        };

                        var rejectWrapper = function(val){
                            // 執行than傳入的successFn
                            var ret = failFn(val);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve(info);
                                },function(info){
                                    reject(info);
                                });
                            } else {
                                reject(ret);
                            }
                        }

                        // 這里的instance是上一個Promise實例
                        instance._onResolved.push(resolveWrapper);
                        instance._onRejected.push(rejectWrapper);

                        // 上一個instance已經resolve執行了，
                        if (instance._status === RESOLVED) {
                            resolveWrapper(instance._value);
                        }

                        if(instance._status === REJECTED){
                            rejectWrapper(instance._value);
                        }
                    });
                };
                promise_proto.resolve = function(val) {
                    if (this._status === PENDING) {
                        this._status = RESOLVED;
                        this._value = val;
                        for (var i = 0, len = this._onResolved.length; i < len; i++) {
                            this._onResolved[i](val);
                        }
                    }
                };
                promise_proto.reject = function(val) {
                    if (this._status === PENDING) {
                        this._status = REJECTED;
                        this._value = val;
                        for (var i = 0, len = this._onRejected.length; i < len; i++) {
                            this._onRejected[i](val);
                        }
                    }
                };

                Promise.all = function (arr) {
                    return new Promise(function (resolve) {
                        var len = arr.length,
                            i = -1,
                            count = 0,
                            results = [];
                        while (++i < len) {
                            ~function (i) {
                                arr[i].then(
                                    function (val) {
                                        results[i] = val;
                                        if (++count === len) {
                                            resolve(results);
                                        }
                                    },
                                    function () {
                                        console.log("沒有執行完");
                                    }
                                );
                            }(i);
                        }
                    });
                };
                Promise.race = function (arr) {
                    return new Promise(function (resolve, reject) {
                        var len = arr.length,
                            i = -1;
                        //  給每一個都套上then，誰先完成，先resolve 
                        while (++i < len) {
                            arr[i].then(
                                function (val) {
                                    resolve(val);
                                },
                                function (val) {
                                    reject(val);
                                }
                            );
                        }
                    });
                };
                window.Promise = Promise;
            })();
        </script>
        <script type="text/javascript">
            (function(){
                return new Promise(function(resolve,reject){
                    reject("失敗一下");
                })
            })()
            .then(function(successInfo){
                 return new Promise(function(resolve,reject){
                     console.log(info);
                      resolve(2,3,4);
                 })
            },function(failInfo){
                console.log(failInfo);
                return new Promise(function(resolve,reject){
                    
                    setTimeout(function(){
                        resolve("從失敗走向成功",1,2);
                    },3000);
                        
                })
            })
            .then(function(successInfo){
                console.log(successInfo);
                return new Promise(function(resolve, reject){
                    reject("從成功走向失敗");
                })
            }, function(){})
            .then(function(){
                
            },function(failInfo){
                console.log(failInfo);
            });
            
        </script>
    </head>
    <body>
    </body>
</html>

第六步

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>傳遞參數豐富化</title>
        <script type="text/javascript">
            (function() {
                var PENDING = 0,
                RESOLVED = 1,
                REJECTED = 2,
                array_proto = Array.prototype,
                Promise = function(fn) {
                    var instance = this;
                    instance["_value"] = "",
                    resolve = function(val) {
                        instance.resolve.apply(instance, arguments);
                    };
                    reject = function(val){
                        instance.reject.apply(instance, arguments);
                    }

                    instance["_status"] = PENDING;
                    instance["_onResolved"] = [];
                    instance["_onRejected"] = [];

                    fn(resolve, reject);
                },
                promise_proto = Promise.prototype;
                    
                promise_proto.then = function(successFn, failFn) {
                    var instance = this;
                    // 返回一個新的Promise實例
                    return new Promise(function(resolve, reject) {
                        var resolveWrapper = function(val) {
                            // 執行than傳入的successFn
                            var ret = successFn.apply(instance,arguments);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve.apply(instance,arguments);
                                },function(info){
                                    reject.apply(instance,arguments);
                                });
                            } else {
                                resolve(ret);
                            }
                        };

                        var rejectWrapper = function(val){
                            // 執行than傳入的successFn
                            var ret = failFn.apply(instance,arguments);
                            // 返回的也是Promise類型則
                            if (typeof(ret) != "undefined" && ret.constructor === Promise) {
                                // 給它than一個，
                                ret.then(function(info) {
                                    // 觸發第二個than進入的函數
                                    resolve.apply(instance,arguments);
                                },function(info){
                                    reject.apply(instance,arguments);
                                });
                            } else {
                                reject(ret);
                            }
                        }

                        // 這里的instance是上一個Promise實例
                        instance._onResolved.push(resolveWrapper);
                        instance._onRejected.push(rejectWrapper);

                        // 上一個instance已經resolve執行了，
                        if (instance._status === RESOLVED) {
                            resolveWrapper.apply(instance,instance._value);
                        }

                        if(instance._status === REJECTED){
                            rejectWrapper.apply(instance,instance._value);
                        }
                    });
                };
                promise_proto.resolve = function(val) {
                    if (this._status === PENDING) {
                        this._status = RESOLVED;
                        this._value = arguments;
                        for (var i = 0, len = this._onResolved.length; i < len; i++) {
                            this._onResolved[i].apply(this, arguments);
                        }
                    }
                };
                promise_proto.reject = function(val) {
                    if (this._status === PENDING) {
                        this._status = REJECTED;
                        this._value = arguments;
                        for (var i = 0, len = this._onRejected.length; i < len; i++) {
                            this._onRejected[i].apply(this, arguments);
                        }
                    }
                };
                
                promise_proto.catch = function (onRejected) {
                    return this.then(null, onRejected);
                }

                Promise.all = function (arr) {
                    return new Promise(function (resolve) {
                        var len = arr.length,
                            i = -1,
                            count = 0,
                            results = [];
                        while (++i < len) {
                            ~function (i) {
                                arr[i].then(
                                    function (val) {
                                        results[i] = array_proto.slice.call(arguments);
                                        if (++count === len) {
                                            resolve.apply(this,results);
                                        }
                                    },
                                    function () {
                                        console.log("沒有執行完");
                                    }
                                );
                            }(i);
                        }
                    });
                };
                Promise.race = function (arr) {
                    return new Promise(function (resolve, reject) {
                        var len = arr.length,
                            i = -1;
                        //  給每一個都套上then，誰先完成，先resolve 
                        while (++i < len) {
                            arr[i].then(
                                function (val) {
//                                    resolve(val);
                                    resolve.apply(this,arguments)
                                },
                                function (val) {
//                                    reject(val);
                                    reject.apply(this,arguments)
                                }
                            );
                        }
                    });
                };
                window.Promise = Promise;
            })();
        </script>
        <script type="text/javascript">
/*            (function(){
                return new Promise(function(resolve,reject){
                    reject("失敗一下",1,2);
                })
            })()
            .then(function(successInfo){
                 return new Promise(function(resolve,reject){
                      resolve(2);
                 })
            },function(failInfo){
                console.log(arguments);
                return new Promise(function(resolve,reject){
                    resolve("從失敗走向成功",2,3);
                })
            })
            .then(function(successInfo1, successInfo2, successInfo3){
                console.log(arguments);
                return new Promise(function(resolve, reject){
                    reject("從成功走向失敗");
                })
            }, function(){})
            .then(function(){
                
            },function(failInfo){
                console.log(failInfo);
            });*/
        </script>
        
        <script type="text/javascript">
            /*var a1 = new Promise(function(resolve,reject){
                resolve(1,1);
            });
            
            var a2 = new Promise(function(resolve,reject){
                resolve(2,2);
                    
            });
            
            var a3 = new Promise(function(resolve,reject){
                resolve(3,3);
            });
            
            Promise.all([a1,a2,a3]).then(function(val1,val2,val3){
                console.log(val1);
                console.log(val2);
                console.log(val3);
            });*/
        </script>
        
        <script type="text/javascript">
            /*var a1 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(1);
                },5000)
                    
            });
            
            var a2 = new Promise(function(resolve,reject){
                setTimeout(function(){
                    resolve(2);
                },2000)
                    
            });
            
            var a3 = new Promise(function(resolve,reject){
                reject(5,6);
            });
            
            Promise.race([a1,a2,a3]).then(function(value,value2){
                console.log(value);
                console.log(value2);
            },function(value,value2){
                console.log(value);
                console.log(value2);
            });*/
        </script>
        
        <script type="text/javascript">
            (function(){
                return new Promise(function(resolve,reject){
                    reject("失敗一下",1,2);
                })
            })()
            .catch(function(failInfo){
                console.log(arguments);
                return new Promise(function(resolve,reject){
                    resolve("從失敗走向成功",2,3);
                })
            });
        </script>
    </head>
    <body>
    </body>
</html>