<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="x5-fullscreen" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>中材矿山</title>
<meta content="" name="description">
<meta content="" name="keywords">
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/layui/css/layui.css" rel="stylesheet">
<link href="vendor/animate/animate.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-12">
<!-- <div onClick={promiseClick}>开始异步请求</div> -->
<button type="button" class="btn btn-primary" onClick={promiseClick}>（首选项）Primary</button>
</div>
</div>
</div>
<script src="./vue.js"></script>
<!-- layer 独立版调试 -->
<script src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//进阶一：
/*function promiseClick(){
let p = new Promise(function(resolve, reject){
setTimeout(function(){
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num)
if(num<=10){
resolve(num);//resolve是对promise成功时候的回调
}
else{
reject('数字太于10了即将执行失败回调');//reject就是失败的时候的回调
}
}, 2000);//点击按钮2s后，执行promise方法shuchu
});
return p
}
promiseClick().then(
function(data){
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
},
function(reason){
console.log('rejected失败回调');
console.log('失败执行回调抛出失败原因：',reason);
}
); */
/*运行promiseClick并且在then中传了两个参数，这两个参数分别是两个函数，then方法可以接受两个参数，第一个对应resolve的回调，第二个对应reject的回调。（也就是说then方法中接受两个回调，一个成功的回调函数，一个失败的回调函数，并且能在回调函数中拿到成功的数据和失败的原因），所以我们能够分别拿到成功和失败传过来的数据就有以上的运行结果*/
//进阶二：
// catch的用法，与Promise对象方法then方法并行的一个方法就是catch,与try catch类似，catch就是用来捕获异常的，也就是和then方法中接受的第二参数rejected的回调是一样的，如下：
function promiseClick(){
let p = new Promise(function(resolve, reject){
setTimeout(function(){
var num = Math.ceil(Math.random()*20); //生成1-10的随机数
console.log('随机数生成的值：',num)
if(num<=10){
resolve(num);
}
else{
reject('数字太于10了即将执行失败回调');
}
}, 2000);
})
return p
}
promiseClick().then(
function(data){
console.log('resolved成功回调');
console.log('成功回调接受的值：',data);
}
)
.catch(function(reason, data){
console.log('catch到rejected失败回调');
console.log('catch失败执行回调抛出失败原因：',reason);
});
</script>
</body>
</html>