18_Promise.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <script>
  11. // console.log(4)
  12. // setTimeout(()=>{
  13. // console.log(1)
  14. // setTimeout(()=>{
  15. // console.log(2)
  16. // },100)
  17. // setTimeout(()=>{
  18. // console.log(3)
  19. // },10)
  20. // },0)
  21. // console.log(5)
  22. // let p1 = new Promise ((resolve,reject)=>{
  23. // reject()
  24. // resolve()
  25. // }).then(()=>{
  26. // console.log('我成功了')
  27. // }).catch(()=>{
  28. // console.log('我失败了')
  29. // })
  30. /*
  31. promise 有三种状态
  32. pending 进行中
  33. fufiled 已经成功
  34. rejected 已经失败
  35. pending -> fufiled or pending -> rejected
  36. 不可逆的
  37. 1.当一个promise 被创建的时,初始状态为pending
  38. 2.当异步操作执行成功的时候,promise状态变为fufiled 并且执行
  39. then方法中回调函数
  40. 3.当异步操作执行失败的时候,promise状态变为rejected 并且执行
  41. catch方法中的回调函数
  42. */
  43. let p1 = new Promise((resolve, reject) => {
  44. setTimeout(()=>{
  45. console.log(1)
  46. reject()
  47. },1000)
  48. console.log(2)
  49. resolve()
  50. })
  51. let p2 = new Promise ((resolve,reject)=>{
  52. setTimeout(()=>{
  53. console.log(3)
  54. reject()
  55. },800)
  56. reject()
  57. })
  58. let p3 = new Promise ((resolve,reject)=>{
  59. setTimeout(()=>{
  60. console.log(4)
  61. resolve()
  62. },2000)
  63. console.log(5)
  64. reject()
  65. })
  66. /* promise.all()将多个promise实例封装成一个promise实例 */
  67. Promise.all([p1,p2,p3]).then(()=>{
  68. console.log('ok')
  69. }).catch(()=>{
  70. console.log('error')
  71. })
  72. /*
  73. Promise.race([p1,p2,p3]).then(()=>{
  74. console.log('ok')
  75. }).catch(()=>{
  76. console.log('error')
  77. }) */
  78. // new Promise((resolve,reject)=>{
  79. // setTimeout(()=>{
  80. // console.log(1)
  81. // resolve()
  82. // },10)
  83. // }).then(()=>{
  84. // console.log('ok')
  85. // }).catch(()=>{
  86. // console.log('error')
  87. // })
  88. </script>
  89. </body>
  90. </html>