注意看注释哦，可以把整个文件复制去你的编辑器，运行然后尝试一下！
样式不重要，浏览器F12看console.log（）打印的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
#btn,
#btn2 {
width: 100px;
height: 100px;
margin: 0 auto;
display: block;
margin-top: 25%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<button id="btn">promise-resolve</button>
<button id="btn2">promise-reject</button>
<script type="text/javascript">
//promise对象 可以通过在通过then()方法和catch()方法捕获到两个不同回调的值
var btn = document.getElementById("btn");
// resolve 用法
btn.onclick = function() {
function runAsync(num) {
return new Promise(function(resolve, reject) {
//做一些异步操作
setTimeout(function() {
console.log('执行完成', num);
resolve(`随便什么数据${num}`);
}, 1000);
});
}
//promise对象的链式调用
runAsync(1).then(data => {
console.log(data);
return runAsync(2);
}).then(function(data) {
console.log(data);
return runAsync(3);
}).then(function(data) {
console.log(data);
})
}
// resolve 和 reject 用法
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
function getNumber() {
var p = new Promise(function(resolve, reject) {
//做一些异步操作
setTimeout(function() {
var num = Math.ceil(Math.random() * 10); //生成1-10的随机数
if (num <= 5) {
// ----------------当if的条件满足，则调用resolve去改变promise对象的状态为已成功
resolve(num);
} else {
----------------当if的条件 不 满足，则调用reject去改变promise对象的状态为已失败
reject('数字太大了');
}
}, 1000);
});
return p;
}
//promise对象创建的同时会立即执行，因此需要封装进一个方法里面，这样我们通过调用这个方法 在合适的时机 执行
// 调用上面封装好的promise方法
getNumber()
.then( //then里两个参数分别是成功和失败的回调函数
//第一个对应resolved
function(data) {
console.log('resolved');
console.log(data);
},
//第二个对应rejected
function(data) {
console.log('rejected');
console.log(data);
}
)
}
// ----------------async与awite---------------------
//创建一个异步的方法 ---- timeout()
async function timeout() {
return 'hello world';
}
//async 函数返回的是一个 promise 对象，如果要获取到 promise 返回值，我们应该用then 方法
timeout().then(data => {
console.log(data)
});
console.log('虽然在后面，但是我先执行');
//-------------------------------------------------
// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
})
}
//async和await 二者必须是结合着使用
//await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西
//await 后面也可以不是promise对象，那 await 表达式的运算结果就是它等到的东西
async function testResult() {
//等待doubleAfter2seconds函数返回结果后执行
//doubleAfter2seconds返回的是一个promise对象，
let first = await doubleAfter2seconds(30);
// await 表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third);
}
testResult();
</script>
</body>
</html>
