|
|
@@ -0,0 +1,90 @@
|
|
|
+// fetch basic && fetch improved //
|
|
|
+
|
|
|
+const lukeURL = 'https://swapi.dev/api/people/1/'
|
|
|
+
|
|
|
+var tablica = document.querySelector('.tablica')
|
|
|
+
|
|
|
+function fetchBasic(domElem, url) {
|
|
|
+ fetch(url)
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(data => {
|
|
|
+ let table = document.createElement('table');
|
|
|
+ domElem.appendChild(table);
|
|
|
+ let thead = document.createElement('thead');
|
|
|
+ let trThead = document.createElement('tr');
|
|
|
+ thead.appendChild(trThead);
|
|
|
+ table.appendChild(thead);
|
|
|
+ let tr = document.createElement('tr');
|
|
|
+ table.appendChild(tr);
|
|
|
+ for (let index in data) {
|
|
|
+ let tdThead = document.createElement('td');
|
|
|
+ tdThead.innerText = index;
|
|
|
+ // thead.appendChild(tdThead);
|
|
|
+ trThead.appendChild(tdThead);
|
|
|
+ let td = document.createElement('td');
|
|
|
+ // https://swapi.dev/api/ '/\https:\//\swapi\.\dev\/\api/\/' /https:\//\swapi\.\dev/api/\/
|
|
|
+ if (typeof data[index] == 'string' && data[index].match(/http(?:s?):\/\/(?:www\.)?swapi\.dev\/api\//)) {
|
|
|
+ let button = document.createElement('button');
|
|
|
+ button.innerText = 'Show';
|
|
|
+ td.appendChild(button);
|
|
|
+ button.addEventListener('click', function () {
|
|
|
+ domElem.firstChild.remove();
|
|
|
+ fetchBasic(domElem, data[index]);
|
|
|
+ // console.log(domElem)
|
|
|
+ })
|
|
|
+ } else if (typeof data[index] == 'object') {
|
|
|
+ console.log(data[index])
|
|
|
+ for (let i = 0; i < data[index].length; i++) {
|
|
|
+ let button = document.createElement('button');
|
|
|
+ button.innerText = `Show ${i + 1}`;
|
|
|
+ td.appendChild(button);
|
|
|
+ button.addEventListener('click', function () {
|
|
|
+ domElem.firstChild.remove();
|
|
|
+ fetchBasic(domElem, data[index][i]);
|
|
|
+ // console.log(data[index][i]);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ td.innerText = data[index];
|
|
|
+ }
|
|
|
+ tr.appendChild(td);
|
|
|
+ };
|
|
|
+ });
|
|
|
+};
|
|
|
+fetchBasic(tablica, lukeURL);
|
|
|
+
|
|
|
+
|
|
|
+// myfetch
|
|
|
+
|
|
|
+function myfetch(url) {
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ // let start = performance.now();
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.open('GET', url, true);
|
|
|
+ xhr.responseType = 'json';
|
|
|
+ xhr.send();
|
|
|
+ xhr.onload = function(){
|
|
|
+ if (xhr.status != 200) {
|
|
|
+ alert(`Ошибка ${xhr.status}: ${xhr.statusText}`);
|
|
|
+ } else {
|
|
|
+ resolve(xhr.response);
|
|
|
+ };
|
|
|
+ };
|
|
|
+ xhr.onerror = function(){
|
|
|
+ reject(xhr.response);
|
|
|
+ }
|
|
|
+ // let stop = performance.now();
|
|
|
+
|
|
|
+ // let time = stop - start;
|
|
|
+ // console.log(time);
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+myfetch(lukeURL)
|
|
|
+ .then(luke => console.log(luke))
|
|
|
+
|
|
|
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
|
|
|
+
|
|
|
+
|
|
|
+Promise.race([myfetch(lukeURL), delay(75)])
|
|
|
+.then((value) => console.log('value', value))
|
