promise的目的是減少callback的嵌套,提高代碼的可維護性。看一個抽獎的例子,每次抽獎要1秒,共5次,生成一個1-10随機數,大于5則中獎。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<script>
function drawPrize(){
var defer = Promise.defer()
setTimeout(function(){
var random = parseInt(Math.random() * 10);
if(random>5){
defer.resolve({msg: 'gt 5', score: random});
}else{
defer.reject({msg: 'lte 5', score: random});
}
},1000);
return defer.promise;
}
for(var i=1;i<6;i++){
// drawPrize().then(function(data){
// console.log(data);
// console.log('您中獎了');
// }).catch(function(data){
// console.log(data);
// console.log('您未中獎');
// });
drawPrize().then(function(data){
console.log(data);
console.log('您中獎了');
},function(data){
console.log(data);
console.log('您未中獎');
});
}
</script>
</body>
</html>
處理失敗既可以放在catch中,也可以放在then的第二個參數。
Promise.defer()這種寫法已經被一些新浏覽器廢棄,應使用new Promise()建立。
新代碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<script>
function drawPrize(){
return new Promise(function(resolve,reject){
setTimeout(function(){
var random = parseInt(Math.random() * 10);
if(random>5){
resolve({msg: 'gt 5', score: random});
}else{
reject({msg: 'lte 5', score: random});
}
},1000);
});
}
for(var i=1;i<6;i++){
// drawPrize().then(function(data){
// console.log(data);
// console.log('您中獎了');
// }).catch(function(data){
// console.log(data);
// console.log('您未中獎');
// });
drawPrize().then(function(data){
console.log(data);
console.log('您中獎了');
},function(data){
console.log(data);
console.log('您未中獎');
});
}
</script>
</body>
</html>