16.Promise.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  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. // js的循环机制 EventLoop
  11. // 同步事件
  12. // 异步事件:
  13. // 微任务:
  14. // Promise 三种状态
  15. // resolve/fulfilled 成功的
  16. // reject 失败
  17. // pending 等待
  18. // 宏任务 setTimeout setInterval
  19. // 第一种
  20. // console.log("334")
  21. // new Promise((resolve,reject) => {
  22. // console.log("1")
  23. // setTimeout(()=>{
  24. // console.log("45")
  25. // },0)
  26. // reject()
  27. // }).then(res => {
  28. // // then 成功的内容
  29. // console.log("2")
  30. // }).catch(err => {
  31. // // catch 失败的内容
  32. // console.log("3");
  33. // })
  34. // console.log("77")
  35. // 第二种
  36. // let book = new Promise((resolve,reject) => {
  37. // console.log("444")
  38. // setTimeout(()=>{
  39. // console.log("333")
  40. // },2000)
  41. // resolve()
  42. // })
  43. // book.then(res => {
  44. // console.log("111")
  45. // })
  46. // book.catch(()=>{
  47. // console.log("222")
  48. // })
  49. let p1 = new Promise((resolve, reject) => {
  50. console.log("1");
  51. reject();
  52. })
  53. let p2 = new Promise((resolve, reject) => {
  54. console.log("2");
  55. resolve();
  56. })
  57. let p3 = new Promise((resolve, reject) => {
  58. console.log("3");
  59. resolve();
  60. })
  61. // Promise.all 失败一次 则失败 全部成功才成功
  62. // Promise.all([p1,p2,p3]).then(res => {
  63. // console.log("成功")
  64. // }).catch(err => {
  65. // console.log("失败")
  66. // })
  67. // Promise.race 第一个传入的失败才失败 其余的皆为成功
  68. Promise.race([p1,p2,p3]).then(res => {
  69. console.log("成功")
  70. }).catch(err => {
  71. console.log("失败")
  72. })
  73. </script>
  74. </body>
  75. </html>