15.Promise.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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的执行机制 EventLoop
  12. * 先同步 后异步
  13. */
  14. // Promise 异步操作
  15. // 三种状态:pending 进行中; resolve/fulfilled 已成功; reject 已失败
  16. // 第一种
  17. /**
  18. * new Promise((resolve,reject) => {
  19. * 代码块
  20. * resolve()/reject();
  21. * }).then(() => {
  22. * 成功的代码
  23. * }).catch(() => {
  24. * 失败的代码
  25. * })
  26. */
  27. // new Promise((resolve,reject)=>{
  28. // setTimeout(()=>{
  29. // console.log(1);
  30. // },2000)
  31. // reject();
  32. // }).then(() => {
  33. // // 成功走then
  34. // console.log("2")
  35. // }).catch(()=>{
  36. // // 失败走catch
  37. // console.log("3")
  38. // })
  39. // 第二种
  40. // let book = new Promise((resolve, reject) => {
  41. // setTimeout(() => {
  42. // console.log(1);
  43. // reject();
  44. // }, 2000)
  45. // })
  46. // book.then(() => {
  47. // // 成功走then
  48. // console.log("2")
  49. // }).catch(() => {
  50. // // 失败走catch
  51. // console.log("3")
  52. // })
  53. let p1 = new Promise((resolve,reject) => {
  54. console.log("11");
  55. resolve();
  56. })
  57. let p2 = new Promise((resolve,reject) => {
  58. console.log("22");
  59. reject();
  60. })
  61. let p3 = new Promise((resolve,reject) => {
  62. console.log("33");
  63. reject();
  64. })
  65. // Promise.all传入的对象必须都为真才是真
  66. // Promise.all([p1, p2, p3]).then(()=>{
  67. // console.log("哈哈")
  68. // }).catch(() => {
  69. // console.log("哒哒哒")
  70. // })
  71. // Promise.race第一个传入的对象为真才是真
  72. Promise.race([p1, p2, p3]).then(()=>{
  73. console.log("哈哈")
  74. }).catch(() => {
  75. console.log("哒哒哒")
  76. })
  77. </script>
  78. </body>
  79. </html>