|
|
@@ -0,0 +1,134 @@
|
|
|
+const tableOne = document.getElementById('semen');
|
|
|
+
|
|
|
+const dataLuke = async () =>
|
|
|
+ fetch('https://swapi.py4e.com/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(data => data)
|
|
|
+ .catch(() => {});
|
|
|
+
|
|
|
+const FetchBasic = async function (root, dataFetch) {
|
|
|
+ this.data = await dataFetch();
|
|
|
+ for (const key in this.data) {
|
|
|
+ const tr = document.createElement('tr');
|
|
|
+ if (typeof this.data[key] === 'string') {
|
|
|
+ tr.textContent = this.data[key];
|
|
|
+ root.append(tr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const LukeOne = new FetchBasic(tableOne, dataLuke);
|
|
|
+
|
|
|
+const tableTwo = document.getElementById('coco');
|
|
|
+const FetchImproved = async function (root, data, allData = []) {
|
|
|
+ const fetchData = async url =>
|
|
|
+ fetch(url)
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(data => data)
|
|
|
+ .catch(() => {});
|
|
|
+ if (!data) {
|
|
|
+ data = await fetchData('https://swapi.py4e.com/api/people/1/');
|
|
|
+ allData = [data];
|
|
|
+ }
|
|
|
+
|
|
|
+ const tr = document.createElement('tr');
|
|
|
+
|
|
|
+ for (const key in data) {
|
|
|
+ const td = document.createElement('td');
|
|
|
+ const btn = document.createElement('button');
|
|
|
+ if (data[key].includes('https://swapi.py4e.com/')) {
|
|
|
+ tr.id = data[key];
|
|
|
+ btn.textContent = data[key];
|
|
|
+ btn.addEventListener('click', async () => {
|
|
|
+ btn.style.backgroundColor = 'grey';
|
|
|
+ const newData = await fetchData(data[key]);
|
|
|
+ if (allData.some(el => el.name === newData.name)) return;
|
|
|
+ allData.push(newData);
|
|
|
+ await FetchImproved(root, newData, allData);
|
|
|
+ });
|
|
|
+ td.append(btn);
|
|
|
+ tr.append(td);
|
|
|
+ } else if (typeof data[key] === 'string') {
|
|
|
+ td.textContent = data[key];
|
|
|
+ tr.append(td);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ root.append(tr);
|
|
|
+};
|
|
|
+
|
|
|
+const LukeTwo = new FetchImproved(tableTwo);
|
|
|
+
|
|
|
+const tableThree = document.getElementById('oil');
|
|
|
+const FetchImprovedRecursion = async function (root, data, allData = []) {
|
|
|
+ const fetchData = async url =>
|
|
|
+ fetch(url)
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(data => data)
|
|
|
+ .catch(() => {});
|
|
|
+ if (!data) {
|
|
|
+ data = await fetchData('https://swapi.py4e.com/api/people/1/');
|
|
|
+ allData = [data];
|
|
|
+ }
|
|
|
+
|
|
|
+ const tr = document.createElement('tr');
|
|
|
+
|
|
|
+ for (const key in data) {
|
|
|
+ const td = document.createElement('td');
|
|
|
+ if (data[key].includes('https://swapi.py4e.com/')) {
|
|
|
+ td.textContent = data[key];
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.setAttribute('href', data[key]);
|
|
|
+ a.setAttribute('target', 'blank');
|
|
|
+ a.append(td);
|
|
|
+ tr.append(a);
|
|
|
+ } else if (typeof data[key] === 'string') {
|
|
|
+ td.textContent = data[key];
|
|
|
+ tr.append(td);
|
|
|
+ } else if (typeof data[key] === 'object') {
|
|
|
+ data[key].forEach(async key => {
|
|
|
+ const newData = await fetchData(key);
|
|
|
+ if (allData.some(el => el.name === newData.name)) return;
|
|
|
+ allData.push(newData);
|
|
|
+ await FetchImprovedRecursion(root, newData, allData);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ root.append(tr);
|
|
|
+};
|
|
|
+
|
|
|
+const LukeThree = new FetchImprovedRecursion(tableThree);
|
|
|
+
|
|
|
+function myFetch(URL) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ const request = new XMLHttpRequest();
|
|
|
+ request.open('GET', URL, false);
|
|
|
+ request.onreadystatechange = function () {
|
|
|
+ if (request.readyState != 4) return;
|
|
|
+ if (request.status == 200) resolve(JSON.parse(request.responseText));
|
|
|
+ };
|
|
|
+ request.onerror = () => reject(request);
|
|
|
+ request.send();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+myFetch('https://swapi.py4e.com/api/people/1/')
|
|
|
+ .then(luke => console.log(luke))
|
|
|
+ .catch(e => console.error(e));
|
|
|
+
|
|
|
+function myFetchDelay(URL, delay = 0) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ const request = new XMLHttpRequest();
|
|
|
+ request.open('GET', URL, false);
|
|
|
+ request.onreadystatechange = function () {
|
|
|
+ if (request.readyState != 4) return;
|
|
|
+ if (request.status == 200) setTimeout(resolve, delay, delay);
|
|
|
+ };
|
|
|
+ request.onerror = () => reject(request);
|
|
|
+ request.send();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+Promise.race([
|
|
|
+ myFetchDelay('https://swapi.py4e.com/api/people/1/', 26),
|
|
|
+ myFetchDelay('https://swapi.py4e.com/api/people/1/', 0),
|
|
|
+]).then(delay => console.log(delay));
|
