<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Promise hell</title> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <style> table{ font-family: sans-serif; border: 1px solid black; } td{ border: 1px solid black; } </style> </head> <body> <div id="cont"> </div> <script> //-----------------fetch Basic------------------------------- /*function create(container, json){ let table = document.createElement('table'); for(let i in json){ let tr = document.createElement('tr'); let td = document.createElement('td'); let td2 = document.createElement('td'); td.innerText = i; td2.innerText = json[i]; tr.append(td,td2); table.append(tr); } container.append(table); } fetch('https://swapi.dev/api/people/1/') .then(res => res.json()) .then(res => create(cont,res))*/ //---------------fetch improved-------------------------------- /*function create(container, json) { let table = document.createElement('table'); for (const i in json) { let tr = document.createElement('tr'); let td = document.createElement('th'); let td2 = document.createElement('td'); td.innerText = i; if(typeof json[i] === 'string' && json[i].includes('https://swapi.dev/api/')) { let btn = document.createElement('button'); btn.innerText = json[i]; let key=false; btn.addEventListener('click',()=>{ key===true?key=false:key=true; console.log(key); if(key==true){ fetch(json[i]) .then(res => res.json()) .then(res => create(td2,res)); }else{ let k=td2.lastElementChild; td2.removeChild(k); } }) td2.append(btn); }else if(Array.isArray(json[i])) { for(let item of json[i]){ if(typeof item === 'string' && item.includes('https://swapi.dev/api/')){ let p=document.createElement('p'); let btn = document.createElement('button'); btn.innerText = item; let key=false; btn.addEventListener('click',()=>{ key===true?key=false:key=true; console.log(key); if(key==true){ fetch(item) .then(res => res.json()) .then(res => create(td2,res)); }else{ let k=td2.lastElementChild; td2.removeChild(k); } }) p.append(btn); td2.append(p); }else{ td2.append = item; } } }else if(typeof json[i] === 'object' && json[i] !== null){ for (const key in jsonStr[key]) { let obj = document.createElement('p'); obj.textContent = `${i}: ${json[i]}`; td2.append(obj) } }else{ td2.innerText = json[i]; } tr.append(td); tr.append(td2); table.append(tr); for (let cell of tr.cells) { cell.style.border = '2px solid black'; cell.style.padding = '10px'; cell.style.textAlign = 'left'; } } container.append(table); } fetch('https://swapi.dev/api/people/1/') .then(res => res.json()) .then(res => create(cont, res));*/ //------------myFetch function myfetch(url){ return new Promise(function (resolve, reject){ let xhr = new XMLHttpRequest() xhr.open('GET',url,true); xhr.send(); xhr.onload= () => xhr.status === 200 ? resolve(JSON.parse(xhr.responseText)) : reject(); }); } myfetch('https://swapi.dev/api/people/1/') .then(luke => console.log(luke), () => console.log('Error')); //------------race function delay(ms){ return new Promise(resolve=>setTimeout(resolve,ms)); } Promise.race([delay(100),myfetch('https://swapi.dev/api/people/1/')]) .then(res=>{ if(!res){ console.log('hello'); }else{ console.log(res); } }, err=>{ console.log(err); } ); </script> </body> </html>