後來發現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>