<!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>