關於promise

時間 2019-11-12

標籤關於 promise 简体版

原文原文鏈接

後來發現promise是解決異步的一個鏈式調用的好的方法,避免了所謂的回調的監獄,javascript

它有三個狀態,未做爲,已經完成和已經失敗,起始是未做爲,而後有了動做總會有個結果,html

分紅resolve,已經順利ok和reject執行失敗,promise傳遞參數就靠這兩個狀態,已經達成某個狀態,那就java

不可能再是另外種狀態了了!使用方法如我代碼:寫了好幾遍了,實現方式一種是es6的原生的promise對象jquery

另外種方式是jquery的deferred對象.看代碼了:es6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise by jquery and es6</title>
    <script type="text/javascript" src='../jquery-2.2.3.min.js'></script>
</head>
<body>
    <h1>this is the promise page test</h1>
    <textarea cols='100' rows="10"></textarea>

    <script type="text/javascript">
        //first 用es6自帶的promise做爲嘗試的方法來作異步
        /**
        var app = {
            es6_promise:function(url){
                var promise = new Promise(function(resolve,reject){
                    $.ajax({
                        type:'get',
                        data:{},
                        url:url,
                        success:function(msg){
                            resolve(msg);
                            console.log('first place '+msg);
                        },
                        error:function(msg){
                            reject(msg);
                        }
                    })
                });
                return promise;
            },
            setDely:function(){
                var promise = new Promise(function(resolve,reject){
                    setTimeout(function(){
                        resolve('this is setTimeout');
                    },2000)
                    // alert('this is from ajax msg '+ajaxData);
                    alert('this is alert after setTimeout');
                })
                return promise;
            }
        }
        app.es6_promise('/promise/our.json')
        .then(function(data){console.log('second '+data);return 'hello';})
        .then(function(data){console.info('third '+data)})

        app.setDely()
        .then(function(msg){console.log(msg);return '我愛鍾亞姬'})
        .then(function(msg){alert(msg);return '我終於能夠娶到鍾亞姬了'})
        .then(function(data){alert(data)});
        **/

        //jquery 的deferred jquery版本高於1.5方可
        //deferred狀況一,連續的鏈式調用
        /*
        $.ajax({
            url:'/promise/plan.json',
            type:'get',
            data:{},
            dataType:'json',
        }).done(function(msg){
            console.log('first time successfully!');
            console.info(msg);
        }).done(function(msg){
            console.log('second time successfully!');
            console.info(msg);
        }).fail(function(data){
            console.log('this is first time that i am fail!');
        })
        */

        //$.when來處理多個defer對象[處理延時和回調的方法]
        /*
        $.when($.ajax({url:'/promise/plan.json',type:'get'}),$.ajax({url:'/promise/our.json',type:'get'}))
        .done(function(first,second){
            alert('request is finished');console.log(first);console.info(second)
        })
        */

        /*自定義的deferred的方法來解決異步問題!*/

        /*這樣不行,由於沒有定義deferred對象,執行會先顯示here is done再出現alert
            function wait(){
                var task = function(){
                    alert('hello , I success later');
                }
                setTimeout(task,3000);
            }
            $.when(wait())
            .done(function(){console.log('here is done')})
            .fail(function(){console.log('here is fali')})
        */

        //本身定義deferred對象便可
        /*
        var promise_jquery = $.Deferred();

        var wait = function(promise_jquery){
            var deal = function(){
                alert('i am async inside');
                //這裏是體現了僅僅有一種狀態發生在一個函數內部因此,哈哈
                promise_jquery.resolve('this is the data be back');
                promise_jquery.reject('this is erro  inside');//這個沒有接收到
            }
            setTimeout(deal,3000);
            return promise_jquery;
        }
        $.when(wait(promise_jquery))
        .done(function(data){
            alert(data);
        })
        //對應上述,這裏糾正產沒有反應了    
        .fail(function(data){
            alert(data)
        })
        */

        //防止狀態外部被改變的方法
        /*
        var wait = function(){
            var dtd = $.Deferred();
            var in_ = function(){
                alert('this is inside function');
                dtd.resolve('I miss you zhongyaji');
            }
            setTimeout(in_,2000);
            return dtd.promise();
        }

        $.when(wait())
        .done(function(msg){
            alert(msg);
        }).done(function(){
            alert('I love you fairy');
        })
        */
    </script>

    <!--再來描繪一遍,複習一發-->
    <script type="text/javascript">
        // var zhongyaji = function(){
        //     var promise = new Promise(function(resolve,reject){
        //         $.ajax({
        //             url:'/promise/our.json',
        //             type:'get',
        //             data:{},
        //         }).done(function(data){
        //             resolve(data);
        //         }).fail(function(data){
        //             reject(data);
        //         })
        //     })
        //     return promise;
        // }
        // zhongyaji().then(function(data){
        //     console.log(data);
        // })

        // function fairy(){
        //     var promise = new Promise(function(resolve,reject){
        //         setTimeout(function(){
        //             console.log('我愛鍾亞姬,哈哈,好怪');
        //             resolve('I love you!')
        //         },2000);
        //     })
        //     return promise;
        // }
        // fairy().then(function(data){
        //     console.log(data);
        // })
        //哈哈,這些實例老子寫的仍是溜得不行啦哈哈
        function sleep(){
            var defer = $.Deferred();
            setTimeout(function(){
                alert('my love to you is deep');
                defer.resolve('this is love');
            },3000)
            return defer.promise();
        }
        $.when(sleep()).done(function(data){
            console.log(data);
        })
    </script>

</body>
</html>

相關標籤/搜索

每日一句

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