Homework/js/12_async-promise/index.js

fetchImprovedWrapp()
function fetchImprovedWrapp() {

   fetch('https://swapi.dev/api/people/1/')
   .then(res => res.json())
   .then(
      luke => {
         console.log(luke)
         renderTable(wrapp, luke)
      }   
   )

   function renderTable(element, json, backup=[]) {
      let backArr = backup
      element.innerHTML = ''      
      const table = document.createElement('table')
      element.append(table)
      for (const [key, value] of Object.entries(json)) {
         const tr = document.createElement('tr')
         table.append(tr)
         const th = document.createElement('th')
         th.innerText = key
         tr.append(th)

         const td = document.createElement('td')         
         function fillTD(string) {
            const re = /https:\/\/swapi.dev\/api\//
            // let strFromArr = value.join(' ')
            // console.log(strFromArr)
            // let reRes2 = strFromArr.match(re)
            // console.log(reRes2)
            // let reRes3 = re.exec(strFromArr)
            // console.log(reRes3)
            let reRes = re.test(string)
            if (reRes) {
               let newString = string.replace(re, '')
               const btn = document.createElement('button')
               btn.innerText = 'Перейти на ' + newString
               td.append(btn)
               btn.onclick = () => {
                  fetch(string)
                  .then(res => res.json())
                  .then(obj => {
                     console.log(obj)
                     backArr.push(json) 
                     // console.log(backArr)
                     renderTable(element, obj, backArr)
                  })
               }
            } else {
               const span = document.createElement('span')
               span.innerText = value
               td.append(span)
            }
         }
         if (typeof value === 'object') {
            for (const el of value) {
               fillTD(el)
            }
         } else {
            fillTD(value)
         }
         tr.append(td)         
      }
      const backBtn = document.createElement('button')
      backBtn.innerText = 'Назад'
      element.append(backBtn)
      backBtn.onclick = () => {
         let lastObj = backArr.pop() 
         // console.log(backArr)
         if (lastObj) {
            renderTable(element, lastObj, backArr)
         }         
      }
   }

}


// myFetchWrapp()
function myFetchWrapp() {

   function myfetch(url){
      return new Promise(function (resolve, reject) {

          const xhr = new XMLHttpRequest()    
          xhr.open('GET', url, true) 

          xhr.onreadystatechange = function() { //обработчик изменения статуса запроса. Статус == 4 сигнализирует о том, что запрос окончен.
            if (xhr.readyState != 4){
               return
            }
            if (xhr.status == 200){
               resolve(JSON.parse(xhr.responseText))
            }
            else {
               reject(new Error('Ошибка ' +  xhr.status + ', ' + xhr.statusText))
            }
         }

         xhr.send() 
      })
   }

   // myfetch('https://swapi.dev/api/people/1/')
   // .then(luke => console.log(luke))

   const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

   Promise.race([myfetch('https://swapi.dev/api/people/1/'), delay(80)]).then((value) => {
      console.log(value)
    })
}