<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function 摇骰子(猜测) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const n = 6 //parseInt(Math.random() * 6 + 1)
console.log('开始投了')
if (n > 3) {
if (猜测 === "大") {
console.log('第一个' + n)
resolve("好嗨哦")
} else {
console.log('猜错了,第一个摇出来是' + n)
reject("我是第一个输光了")
}
} else {
if (猜测 === "小") {
console.log('第二个' + n)
resolve("好嗨哦")
} else {
console.log('猜错了,第二个摇出来是' + n)
reject("我是第二个输光了")
}
}
},0)
})
}
//一,摇一个骰子
// (1)用普通的promise方法
// 摇骰子("小").then(res => console.log(res),err => console.log(err))
// (2)用async方法
// async function test(){
// try{
// let n = await 摇骰子("大") //await接收的就是.then里面的东西
// console.log('我赢了')
// }catch(error){ console.log('我输了')} //try{}就是包住then的东西再用catch接受reject的东西
// }
// test()
//-------------------------------------------------------------
//二,同时摇两个骰子
// (1)用普通的promise方法
// Promise.all([摇骰子("小"), 摇骰子("大")]).then(res => {
// console.log(res)
// }, err => {
// console.log('终极' + err)
// })
//Promise.all里有Pro1,Pro2,Pro3,假如Pro2被reject了,它的err
//会立即被传入Promise.all的catch里,而且Promise.all的catch会立即
//执行。并且Pro3不会被忽略,也会按照自己的流程执行(比如有console.log,也还是会console.log出来)
//Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时
//候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。
// (2)用async方法
async function test2(){
console.log('我会第一个执行吗')//会
try {
let res= await Promise.all([摇骰子('大'),摇骰子('小')])
console.log(res) //res相当于then里的res 是数组
}catch(err){
console.log('终极'+err)
}
console.log('我会第二个执行吗')//不会 这个代码会等到await执行完了后才会执行
}
test2()
for(let i = 0 ;i<4;i++){
console.log('我会第三个执行吗'+i)
}
//总结: 1,async会比Promise看起来更像同步代码 2,(async function test(){})()会返回一个promise
//3,await必须且只能在async里使用 并且async的内部的await后面的函数必须等await的Promise函数执行完才会执行
//如果await等的函数是一个异步函数的话,async会等外部的同步函数执行完了才会执行自己await的函数
//如果await等的函数是同步函数的话 就按正常函数运行
</script>
</body>
</html>
结果:

image.png
由此可知,await对代码执行顺序的影响:

image.png