Промисы.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. //fetch basic
  2. {
  3. function jsonTable (dom,json){
  4. let table = document.createElement('table')
  5. table.border = "1"
  6. dom.append(table)
  7. for(let el in json){
  8. let tr = document.createElement('tr')
  9. let td1 = document.createElement('td')
  10. let td2 = document.createElement('td')
  11. td1.innerText= el
  12. td2.innerText= json[el]
  13. table.append(tr)
  14. tr.append(td1,td2)
  15. }
  16. }
  17. fetch('https://swapi.dev/api/starships/12/')
  18. .then(res => res.json())
  19. .then(luke =>jsonTable(document.body,luke))
  20. }
  21. //fetch improved
  22. {
  23. function jsonTable (dom,json){
  24. let table = document.createElement('table')
  25. table.border = "1"
  26. dom.append(table)
  27. for(let el in json){
  28. let tr = document.createElement('tr')
  29. let td1 = document.createElement('td')
  30. let td2 = document.createElement('td')
  31. td1.innerText= el
  32. td2.innerText= json[el]
  33. table.append(tr)
  34. tr.append(td1,td2)
  35. function btn (link){
  36. let button = document.createElement('button')
  37. button.innerText='info'
  38. button.onclick= function(){
  39. fetch(link)
  40. .then(res => res.json())
  41. .then(luke =>jsonTable(document.body,luke))
  42. }
  43. td2.append(button)
  44. }
  45. if(Array.isArray(json[el])){
  46. for(let elArr of json[el]){
  47. if(elArr.indexOf("https://swapi.dev")!== -1){
  48. btn(elArr)
  49. }
  50. }
  51. }
  52. if(json[el].indexOf("https://swapi.dev")!== -1){
  53. btn(json[el])
  54. }
  55. }
  56. }
  57. fetch('https://swapi.dev/api/starships/12/')
  58. .then(res => res.json())
  59. .then(luke =>jsonTable(document.body,luke))
  60. }
  61. //race
  62. {
  63. function delay(ms){
  64. function executor(fulfill, reject){
  65. setTimeout(() => fulfill(ms), ms)
  66. }
  67. return new Promise(executor)
  68. }
  69. let promise1 = fetch("https://swapi.dev/api/films/1/")
  70. .then(() => console.log(`promise ${Date.now()-startTimer} ms`))
  71. let promise2 = delay(400)
  72. .then(() => console.log("delay"))
  73. let startTimer = Date.now()
  74. Promise.race([promise1, promise2])
  75. .then(result => result)
  76. }
  77. //Promisify: confirm
  78. {
  79. function confirmPromise(text){
  80. function executor(fulfill, reject) {
  81. if (confirm(text)){
  82. fulfill()
  83. }
  84. else{reject()}
  85. }
  86. return new Promise(executor)
  87. }
  88. confirmPromise('Промисы это сложно?').then(() => console.log('не так уже и сложно'),
  89. () => console.log('respect за усидчивость и внимательность'))
  90. }
  91. //Promisify: prompt
  92. {
  93. function promptPromise(text){
  94. function executor(fulfill, reject) {
  95. let name = prompt(text)
  96. if (name){
  97. fulfill(name)
  98. }
  99. else{reject()}
  100. }
  101. return new Promise(executor)
  102. }
  103. promptPromise("Как тебя зовут?").then(name => console.log(`Тебя зовут ${name}`),
  104. () => console.log('Ну зачем морозиться, нормально же общались'))
  105. }