homework on promises done

hw11-promise/script.js

@@ -8,9 +8,12 @@ function drawObjTable(parent, obj) {
     let table = document.createElement('table')
     table.border = 1
     table.style.border = '5px double grey'
+
     let closeRow = document.createElement('tr')
+
     let closeTd = document.createElement('td')
     closeTd.style.border = 'none'
+    
     let closeBtn = createBtn('Close table')
     closeBtn.style.backgroundColor = 'firebrick'
     closeBtn.style.color = 'white'
@@ -32,15 +35,11 @@ function drawObjTable(parent, obj) {
         tdValue.style.color = 'whitesmoke'
 
         if (obj[key].constructor.name === 'Array') {
-            let i = 0
             for (let item of obj[key]) {
-                i++;
-                console.log('current', item)
                 if (typeof item === 'string' && /^(https:\/\/|http:\/\/)/.test(item)) {
                     let btn = createBtn(`Loading...`)
                     btn.disabled = true
 
-                    
                     fetch(item)
                         .then((res) => {
                             if(res.ok) {
@@ -48,7 +47,6 @@ function drawObjTable(parent, obj) {
                             } else {
                                 throw new Error()
                             }
-                        
                         })
                         .then(obj => {
                             btn.disabled = false
@@ -67,7 +65,13 @@ function drawObjTable(parent, obj) {
             btn.disabled = true
         
             fetch(obj[key])
-                .then(res => res.json())
+                .then((res) => {
+                    if(res.ok) {
+                        return res.json()
+                    } else {
+                        throw new Error()
+                    }
+                })
                 .then(obj => {
                     btn.disabled = false
                     btn.innerText = obj[Object.keys(obj)[0]]
@@ -89,6 +93,7 @@ function drawObjTable(parent, obj) {
 let container = document.createElement('div')
 document.body.append(container)
 
+//luke skywalker
 fetch('https://swapi.dev/api/people/1/')
     .then((res) => {
         if(res.ok) {
@@ -100,4 +105,55 @@ fetch('https://swapi.dev/api/people/1/')
     .then(luke => {
         drawObjTable(container, luke)
     })
-    .catch((e) => console.warn('something bad happpened ', e))
+    .catch((e) => console.warn('something bad happpened ', e))
+
+// myFetch
+function myFetch(url) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+        xhr.open('GET', url, true)
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState != 4){
+                return;
+            }
+        
+            if (xhr.status == 200){
+                resolve(JSON.parse(xhr.response))
+            }
+            else {
+                reject(new Error(`smth bad happened during request to ${url}. ${xhr.responseText}`))
+            }
+        }
+        xhr.onerror = () => {
+            reject(new Error(`smth bad happened during request to ${url}. ${xhr.responseText}`))
+        }
+
+        xhr.send()
+    })
+}
+
+//darth vader
+myFetch('https://swapi.dev/api/people/4/')
+    .then((res) => {
+        drawObjTable(container, res)
+    })
+    .catch((e) => {console.warn('error occured!', e)})
+
+//let builtIn = fetch('https://swapi.dev/api/people/1/')
+let mine = myFetch('https://swapi.dev/api/people/4/')
+
+//при нормальном инете сначал побеждает дилей потом майн всегда
+//let delayPromise = delay(300)
+
+//Promise.race([builtIn, mine]).then((value) => console.log('fastest', value))
+
+function delay(ms) {
+    return new Promise((resolve, reject) => {
+      setTimeout(resolve, ms);
+    });
+}
+
+//вот таким образом выходит по разному при условии что симулируется slow 3g
+//по разному но не 50 на 50. 
+let delayPromise = delay(4299)
+Promise.race([delayPromise, mine]).then((value) => console.log('fastest:', value || 'delay'))