关于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的主要内容，如果未能解决你的问题，请参考以下文章