illiaKozyr
/
Homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <script>
//-------------------fetch basic

// let DOM = document.body;
// fetch('https://swapi.py4e.com/api/people/1/')
//   .then(res => res.json(),
//         err => console.log("ERROR"))
//     .then(luke => createTable(DOM, luke));

// function createTable(DOM, JSON) {
//     console.log(DOM, JSON);
//     const tableEl = document.createElement("table");
//     tableEl.border = 1;

//     for(let [key, value] of Object.entries(JSON)) {
//         createTr(key,value);
//     }

//     DOM.append(tableEl);

//     function createTr(td1,td2) {
//         const trEl = document.createElement("tr");
//         const td1El = document.createElement("td");
//         const td2El = document.createElement("td");
//         td1El.innerHTML = td1;
//         if(typeof td2 ==="object") {
//             const ulEl = document.createElement("ul");
//             for(let value of td2) {
//                 const liEl = document.createElement("li");
//                 liEl.innerText = value;
//                 ulEl.appendChild(liEl);
//             }
//             td2El.appendChild(ulEl);
//         } else {
//             td2El.innerHTML = td2;  
//         }
//         trEl.append(td1El,td2El);
//         tableEl.append(trEl);
//     }

// }

//-------------------fetch improved
// let DOM = document.body;
// myFetch(DOM);

// function myFetch(dom) {
// fetch('https://swapi.py4e.com/api/people/1/')
//   .then(res => res.json(),
//         err => console.log("ERROR"))
//     .then(luke => createTable(dom, luke));
// }

// function createTable(DOM, JSON) {
//     console.log(DOM, JSON);
//     const tableEl = document.createElement("table");
//     tableEl.border = 1;
//     for(let [key, value] of Object.entries(JSON)) {
//         createTr(key,value);
//     }
//     DOM.append(tableEl);

//     function createTr(td1,td2) {
//         const trEl = document.createElement("tr");
//         const td1El = document.createElement("td");
//         const td2El = document.createElement("td");
//         td1El.innerHTML = td1;
//         if(typeof td2 ==="number") td2 = td2.toString();
//         if(typeof td2!=="object"&&!td2.indexOf("https://swapi.py4e.com/api/")) td2 = [td2];
//         if(typeof td2 ==="object") {
//             const ulEl = document.createElement("ul");
//             for(let value of td2) {
//                 const liEl = document.createElement("li");
//                 const buttonEl = document.createElement("button");
//                 buttonEl.innerText = value;
//                 buttonEl.onclick = () => {
//                     buttonEl.hidden = true;
//                     myFetch(buttonEl.parentElement);
//                 }
//                 liEl.appendChild(buttonEl);
//                 ulEl.appendChild(liEl);
//             }
//             td2El.appendChild(ulEl);
//         } else {
//             td2El.innerHTML = td2;
//         }
//         trEl.append(td1El,td2El);
//         tableEl.append(trEl);
//     }
// }
//-------------------myfetch

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

// function myfetch(url){
//     return new Promise(function (resolve, reject){
//         const xhr = new XMLHttpRequest();
//         xhr.open('GET', url, true);
//         xhr.responseType = "json";
//         xhr.onload = function(){
//             if (xhr.status == 200){
//                 resolve(xhr.response);
//             }
//             else {
//                 reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
//             }
//         }
//         xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
//         xhr.send();
//     })
// }
//-------------------race

Promise.race([myfetch('https://swapi.py4e.com/api/people/1/'),delay(30)]).then((value) => console.log(value));


function myfetch(url){
    return new Promise(function (resolve, reject){
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = "json";
        xhr.onload = function(){
            if (xhr.status == 200){
                resolve(xhr.response);
            }
            else {
                reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
            }
        }
        xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
        xhr.send();
    })
}

function delay(ms) {
    return new Promise(function(resolve,reject) {
        setTimeout(resolve,ms,"delay");
    })
}
    </script>
</body>
</html>