Vladislav_Postnikov
/
HomeWork1


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