|
@@ -0,0 +1,208 @@
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
+<html lang="en">
|
|
|
|
+ <head>
|
|
|
|
+ <meta charset="UTF-8" />
|
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
+ <title>Document</title>
|
|
|
|
+ </head>
|
|
|
|
+ <body>
|
|
|
|
+ <div id="content"></div>
|
|
|
|
+ <script>
|
|
|
|
+//FETCH BASIC
|
|
|
|
+ // function drawTable(params = {}) {
|
|
|
|
+ // let { data = {}, parent = document.body } = params;
|
|
|
|
+ // let table = document.createElement("table");
|
|
|
|
+ // table.border = 1;
|
|
|
|
+ // parent.append(table);
|
|
|
|
+ // for (let el in data) {
|
|
|
|
+ // let tr = document.createElement("tr");
|
|
|
|
+ // let th = document.createElement("th");
|
|
|
|
+ // let td = document.createElement("td");
|
|
|
|
+
|
|
|
|
+ // if (data[el].constructor.name === "Object") {
|
|
|
|
+ // drawTable({ data: data[el], parent: td });
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(th);
|
|
|
|
+ // tr.append(td);
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // if (data[el].constructor.name === "Array") {
|
|
|
|
+ // let tr = document.createElement("tr");
|
|
|
|
+ // let th = document.createElement("th");
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(th);
|
|
|
|
+ // th.innerHTML = el;
|
|
|
|
+ // th.colSpan = 2;
|
|
|
|
+
|
|
|
|
+ // for (let item of data[el]) {
|
|
|
|
+ // let tr = document.createElement("tr");
|
|
|
|
+ // let td = document.createElement("td");
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(td);
|
|
|
|
+
|
|
|
|
+ // if (data[el].constructor.name === "Object") {
|
|
|
|
+ // drawTable({ data: data[el], parent: td });
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // td.colSpan = 2;
|
|
|
|
+ // td.innerHTML = item;
|
|
|
|
+ // }
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(th);
|
|
|
|
+ // tr.append(td);
|
|
|
|
+ // th.innerHTML = el;
|
|
|
|
+ // td.innerHTML = data[el];
|
|
|
|
+ // }
|
|
|
|
+ // parent.append(table);
|
|
|
|
+ // }
|
|
|
|
+ // fetch("https://swapi.py4e.com/api/people/1/")
|
|
|
|
+ // .then((res) => res.json())
|
|
|
|
+ // .then((luke) => {
|
|
|
|
+ // drawTable({ data: luke });
|
|
|
|
+ // });
|
|
|
|
+
|
|
|
|
+//FETCH IMPROVED
|
|
|
|
+
|
|
|
|
+ // function drawTable(params = {}) {
|
|
|
|
+ // let { data = {}, parent = document.body } = params;
|
|
|
|
+ // let table = document.createElement("table");
|
|
|
|
+ // table.border = 1;
|
|
|
|
+ // parent.append(table);
|
|
|
|
+ // for (let [key, val] of Object.entries(data)) {
|
|
|
|
+ // let tr = document.createElement("tr");
|
|
|
|
+ // let th = document.createElement("th");
|
|
|
|
+ // let td = document.createElement("td");
|
|
|
|
+
|
|
|
|
+ // if (val.constructor.name === "Object") {
|
|
|
|
+ // drawTable({ data: val, parent: td });
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(th);
|
|
|
|
+ // tr.append(td);
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // if (val.constructor.name === "Array") {
|
|
|
|
+ // let tr = document.createElement("tr");
|
|
|
|
+ // let th = document.createElement("th");
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(th);
|
|
|
|
+ // th.innerHTML = key;
|
|
|
|
+ // th.colSpan = 2;
|
|
|
|
+
|
|
|
|
+ // for (let value of val) {
|
|
|
|
+ // let tr = document.createElement("tr");
|
|
|
|
+ // let td = document.createElement("td");
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(td);
|
|
|
|
+
|
|
|
|
+ // if (value.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
|
|
|
|
+ // let btn = document.createElement("button");
|
|
|
|
+ // btn.innerHTML = value;
|
|
|
|
+ // btn.onclick = () => {
|
|
|
|
+ // fetch(value)
|
|
|
|
+ // .then((res) => res.json())
|
|
|
|
+ // .then((luke) => {
|
|
|
|
+ // drawTable({ data: luke });
|
|
|
|
+ // });
|
|
|
|
+ // };
|
|
|
|
+ // td.colSpan = 2;
|
|
|
|
+ // td.append(btn);
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // if (val.constructor.name === "Object") {
|
|
|
|
+ // drawTable({ data: val, parent: td });
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // td.colSpan = 2;
|
|
|
|
+ // td.innerHTML = value;
|
|
|
|
+ // }
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // table.append(tr);
|
|
|
|
+ // tr.append(th);
|
|
|
|
+ // tr.append(td);
|
|
|
|
+ // th.innerHTML = key;
|
|
|
|
+ // if (val.constructor.name === "String" && val.match(/^https:\/\/swapi\.py4e\.com\/+/)) {
|
|
|
|
+ // let btn = document.createElement("button");
|
|
|
|
+ // btn.innerHTML = val;
|
|
|
|
+ // btn.onclick = () => {
|
|
|
|
+ // fetch(val)
|
|
|
|
+ // .then((res) => res.json())
|
|
|
|
+ // .then((data) => {
|
|
|
|
+ // drawTable({ data: data });
|
|
|
|
+ // });
|
|
|
|
+ // };
|
|
|
|
+ // td.append(btn);
|
|
|
|
+ // continue;
|
|
|
|
+ // }
|
|
|
|
+ // td.innerHTML = val;
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // parent === document.body && (parent.innerHTML = "");
|
|
|
|
+ // parent.append(table);
|
|
|
|
+ // }
|
|
|
|
+ // fetch("https://swapi.py4e.com/api/people/1/")
|
|
|
|
+ // .then((res) => res.json())
|
|
|
|
+ // .then((luke) => {
|
|
|
|
+ // drawTable({ data: luke });
|
|
|
|
+ // });
|
|
|
|
+
|
|
|
|
+//MYFETCH
|
|
|
|
+ // function myfetch(url) {
|
|
|
|
+ // return new Promise(function (resolve, reject) {
|
|
|
|
+ // const xhr = new XMLHttpRequest();
|
|
|
|
+ // xhr.open("get", url);
|
|
|
|
+ // xhr.send();
|
|
|
|
+
|
|
|
|
+ // xhr.onreadystatechange = (e) => {
|
|
|
|
+ // if (xhr.readyState != 4) {
|
|
|
|
+ // return;
|
|
|
|
+ // }
|
|
|
|
+ // if (xhr.status === 200) {
|
|
|
|
+ // resolve(JSON.parse(xhr.responseText));
|
|
|
|
+ // }
|
|
|
|
+ // reject("some request error");
|
|
|
|
+ // };
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // myfetch("https://swapi.py4e.com/api/people/1/").then(
|
|
|
|
+ // (data) => console.log(data),
|
|
|
|
+ // (err) => console.log("error ", err)
|
|
|
|
+ // );
|
|
|
|
+
|
|
|
|
+//RACE
|
|
|
|
+ // function myfetch(url) {
|
|
|
|
+ // return new Promise(function (resolve, reject) {
|
|
|
|
+ // const xhr = new XMLHttpRequest();
|
|
|
|
+ // xhr.open("get", url);
|
|
|
|
+ // xhr.send();
|
|
|
|
+
|
|
|
|
+ // xhr.onreadystatechange = (e) => {
|
|
|
|
+ // if (xhr.readyState != 4) {
|
|
|
|
+ // return;
|
|
|
|
+ // }
|
|
|
|
+ // if (xhr.status === 200) {
|
|
|
|
+ // resolve(JSON.parse(xhr.responseText));
|
|
|
|
+ // }else{
|
|
|
|
+ // reject("some request error");
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // };
|
|
|
|
+ // });
|
|
|
|
+ // }
|
|
|
|
+ // const delay = (ms) => new Promise((ok) => setTimeout(() => ok(ms), ms));
|
|
|
|
+
|
|
|
|
+ // const race = async () => {
|
|
|
|
+ // let rez = await Promise.race([
|
|
|
|
+ // delay(Math.random() * 20),
|
|
|
|
+ // myfetch("https://swapi.py4e.com/api/people/1/"),
|
|
|
|
+ // ]);
|
|
|
|
+
|
|
|
|
+ // console.log(rez);
|
|
|
|
+ // };
|
|
|
|
+ </script>
|
|
|
|
+ </body>
|
|
|
|
+</html>
|