34.async await 练习.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <script>
  10. // async await 使用的是try{成功}catch{异常}
  11. //await会阻塞后面的方法
  12. // async function fn1() {
  13. // console.log(1);
  14. // await fn2();
  15. // console.log(2);
  16. // }
  17. // async function fn2() {
  18. // console.log("fn2");
  19. // }
  20. // fn2();
  21. // console.log(3);
  22. // 1 fn2 3 2
  23. // async function async1() {
  24. // console.log('async1 start')
  25. // await async2()
  26. // console.log('async1 end')
  27. // setTimeout(() => {
  28. // console.log('timer1')
  29. // }, 300)
  30. // }
  31. // async function async2() {
  32. // setTimeout(() => {
  33. // console.log('timer2')
  34. // }, 400)
  35. // console.log('async2')
  36. // }
  37. // async1()
  38. // setTimeout(() => {
  39. // console.log('timer3')
  40. // }, 200)
  41. // console.log('start')
  42. // async function fn1(){
  43. // console.log(333)
  44. // await fn2()
  45. // console.log(111)
  46. // }
  47. // async function fn2(){
  48. // throw new Error('rejected')
  49. // }
  50. // async function fn2(){
  51. // console.log(4)
  52. // }
  53. // fn1()
  54. // console.log(2222)
  55. // async function fn1(){
  56. // console.log(1)
  57. // await fn2()
  58. // console.log(2) // 微1
  59. // setTimeout(()=>{ //宏1
  60. // console.log(3)
  61. // },1000)
  62. // }
  63. // async function fn2(){
  64. // console.log(4)
  65. // await fn3()
  66. // console.log(5) //微2
  67. // setTimeout(()=>{ //宏1
  68. // console.log(31)
  69. // },500)
  70. // }
  71. // async function fn3(){
  72. // setTimeout(()=>{
  73. // console.log(6) //宏2
  74. // },2000)
  75. // }
  76. // fn1()
  77. // console.log(7)
  78. /***
  79. * await 后 Promise时 进入微任务
  80. * await 不是Promise 正常执行
  81. // async function a1() {
  82. // console.log(4)
  83. // await a2();
  84. // console.log(1)
  85. // }
  86. // async function a2() {
  87. // await console.log(2);
  88. // await console.log(7)
  89. // }
  90. // a1();
  91. // async function async1() {
  92. // await async2();
  93. // console.log("async1");
  94. // return "async1 success";
  95. // }
  96. // async function async2() {
  97. // return new Promise((resolve, reject) => {
  98. // console.log("async2");
  99. // reject("error");
  100. // });
  101. // }
  102. // async1().then((res) => console.log(res));
  103. </script>
  104. </body>
  105. </html>