关于promise

Posted Modle_Sherlock

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于promise相关的知识,希望对你有一定的参考价值。

后来发现promise是解决异步的一个链式调用的好的方法,避免了所谓的回调的监狱,

它有三个状态,未作为,已经完成和已经失败,起始是未作为,然后有了动作总会有个结果,

分成resolve,已经顺利ok和reject执行失败,promise传递参数就靠这两个状态,已经达成某个状态,那就

不可能再是另外种状态了了!使用方法如我代码:写了好几遍了,实现方式一种是es6的原生的promise对象

另外种方式是jquery的deferred对象.看代码了:

<!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>

 

以上是关于关于promise的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

澄清 node.js + promises 片段

什么时候然后从Promise.all()的子句运行?

关于获取Promise返回值的问题!

关于promise

关于学习js的Promise的心得体会