您的位置：首页 > 其它

关于promise

2016-06-29 07:47 260 查看

后来发现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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航