16_Promise.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. /*
  12. Promise 异步编程 解决方案
  13. 将异步的操作 用同步的流程表达出来
  14. 三种状态: pending 进行中
  15. fulfilled 已成功
  16. rejected 已失败
  17. 层层嵌套
  18. */
  19. // function fn() {
  20. // console.log(3)
  21. // setTimeout(() => {
  22. // console.log(1)
  23. // setTimeout(() => {
  24. // console.log(2)
  25. // }, 500)
  26. // }, 1000)
  27. // }
  28. // fn()
  29. // new Promise ((resolve,reject)=>{
  30. // /* 成功调用 resolve 失败调用reject */
  31. // setTimeout(()=>{
  32. // console.log(4)
  33. // reject()
  34. // },1000)
  35. // }).then(()=>{
  36. // console.log('1')
  37. // },()=>{
  38. // console.log('失败')
  39. // })
  40. let p1 = new Promise((resolve,reject)=>{
  41. setTimeout(()=>{
  42. console.log(1)
  43. resolve()
  44. },1000)
  45. // console.log(1)
  46. // reject()
  47. })
  48. let p2 = new Promise((resolve,reject)=>{
  49. setTimeout(()=>{
  50. console.log(2)
  51. reject()
  52. },1500)
  53. // console.log(2)
  54. // resolve()
  55. })
  56. let p3 = new Promise((resolve,reject)=>{
  57. setTimeout(()=>{
  58. console.log(3)
  59. reject()
  60. },300)
  61. // console.log(3)
  62. // resolve()
  63. })
  64. // Promise.all([p1,p2,p3]).then(()=>{
  65. // console.log('ok')
  66. // }).catch(()=>{
  67. // console.log('失败')
  68. // })
  69. Promise.race([p1,p2,p3]).then(()=>{
  70. console.log('ok')
  71. }).catch(()=>{
  72. console.log('失败')
  73. })
  74. /* Promise.all() 返回一个Promise实例
  75. Promise.race() */
  76. </script>
  77. </body>
  78. </html>