|
|
@@ -0,0 +1,152 @@
|
|
|
+<!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>
|
