24.Promise.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. /**
  11. * js执行机制
  12. * 单线程
  13. * 同步代码 异步代码
  14. * Promise 将异步转为同步流程的对象
  15. * 三种状态
  16. * pending 等待
  17. * fulfilled 成功
  18. * reject 失败
  19. * 状态一旦改变 不可逆
  20. */
  21. // setTimeOut setInterval
  22. // 基础写法
  23. new Promise((resolve, reject) => {
  24. setTimeout(() => {
  25. console.log("你好")
  26. }, 2000)
  27. // resolve();
  28. reject();
  29. }).then(res => {
  30. console.log('1')
  31. }).catch(err => {
  32. console.log('2')
  33. }).finally(() => {
  34. // 无论结果 成功失败 全部执行
  35. console.log("哈哈哈哈")
  36. })
  37. // 链式调用
  38. // const news = new Promise((resolve, reject) => {
  39. // setTimeout(() => {
  40. // console.log("你好")
  41. // resolve();
  42. // reject();
  43. // }, 2000)
  44. // })
  45. // news.then(res => {
  46. // console.log('11')
  47. // })
  48. // news.catch(err => {
  49. // console.log('22')
  50. // })
  51. // 回掉地狱
  52. // setTimeout(() => {
  53. // setInterval(() => {
  54. // setTimeout(() => {
  55. // })
  56. // })
  57. // })
  58. // 静态方法
  59. const p1 = new Promise((resolve, reject) => {
  60. resolve();
  61. });
  62. const p2 = new Promise((resolve, reject) => {
  63. reject();
  64. });
  65. const p3 = new Promise((resolve, reject) => {
  66. reject();
  67. });
  68. // Promise.all 全部成功才成功 一个失败则失败
  69. // promise中的方法并行执行
  70. // resolve 返回的结果是数组
  71. // Promise.all([p1,p2,p3]).then(res => {
  72. // console.log('成功',res)
  73. // }).catch((err) => {
  74. // console.log("失败",err)
  75. // })
  76. // Promise.race 谁先执行完成 返回其结果 无论成功或失败
  77. // Promise.race([p2, p1, p3]).then(res => {
  78. // console.log('成功', res)
  79. // }).catch((err) => {
  80. // console.log("失败", err)
  81. // })
  82. // Poromise.allSettled 无论成功失败 全部等待执行完成 返回每一个的状态
  83. // Promise.allSettled([p2, p1, p3]).then(res => {
  84. // console.log('成功', res)
  85. // }).catch((err) => {
  86. // console.log("失败", err)
  87. // })
  88. // Promise.any 一个成功就成功 全部失败才失败
  89. Promise.any([p2, p1, p3]).then(res => {
  90. console.log('成功', res)
  91. }).catch((err) => {
  92. console.log("失败", err)
  93. })
  94. </script>
  95. </body>
  96. </html>