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>