|
|
@@ -0,0 +1,126 @@
|
|
|
+/* fetch basic & fetch improved*/
|
|
|
+
|
|
|
+let result = document.body
|
|
|
+
|
|
|
+fetch('https://swapi.py4e.com/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke => createTable(result, luke));
|
|
|
+
|
|
|
+function createTable(result, JSON) {
|
|
|
+ let table = document.createElement("table");
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ function createCol(title, value) {
|
|
|
+ let tr = document.createElement("tr");
|
|
|
+ let td = document.createElement("td");
|
|
|
+ let td1 = document.createElement("td");
|
|
|
+
|
|
|
+ td.innerHTML = title;
|
|
|
+
|
|
|
+ if (typeof value === "object") {
|
|
|
+
|
|
|
+ if (Array.isArray(value)) {
|
|
|
+ value.forEach(elem => {
|
|
|
+ td1.appendChild(elem)
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ td1.appendChild(value)
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ td1.innerHTML = value;
|
|
|
+ }
|
|
|
+
|
|
|
+ table.append(tr);
|
|
|
+ tr.append(td, td1);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ for (let [key, value] of Object.entries(JSON)) {
|
|
|
+ createCol(key, link(value));
|
|
|
+ }
|
|
|
+
|
|
|
+ result.append(table);
|
|
|
+ table.border = 1;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+function link(str, container) {
|
|
|
+ if (typeof str === 'string') {
|
|
|
+ if (str.includes('https://')) {
|
|
|
+ let btn = document.createElement('button')
|
|
|
+ btn.innerHTML = 'Go'
|
|
|
+ btn.onclick = () => {
|
|
|
+ fetch(str).then(r => r.json())
|
|
|
+ .then(r => createTable(btn.parentElement, r))
|
|
|
+ }
|
|
|
+ return btn
|
|
|
+ } else {
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (typeof str === 'object') {
|
|
|
+ let arrStr = str.map(item => {
|
|
|
+ if (item.includes('https://')) {
|
|
|
+ let btn = document.createElement('button')
|
|
|
+ btn.innerHTML = 'Go'
|
|
|
+ btn.onclick = () => {
|
|
|
+ fetch(item).then(r => r.json())
|
|
|
+ .then(r => createTable(btn.parentElement, r))
|
|
|
+ }
|
|
|
+ return btn
|
|
|
+ } else {
|
|
|
+ return item
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ return arrStr
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ return str
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* myfetch */
|
|
|
+
|
|
|
+myfetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then(luke => console.log(luke))
|
|
|
+
|
|
|
+ function myfetch(url){
|
|
|
+ return new Promise(function (resolve, reject){
|
|
|
+ const xhr = new XMLHttpRequest();
|
|
|
+ xhr.onreadystatechange = function() {
|
|
|
+ if (xhr.readyState != 4) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (xhr.status == 200){
|
|
|
+ resolve(JSON.parse(xhr.responseText));
|
|
|
+ } else {
|
|
|
+ reject('err')
|
|
|
+ }
|
|
|
+ }
|
|
|
+xhr.open('GET', url , true);
|
|
|
+xhr.send(null);
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/* race */
|
|
|
+
|
|
|
+let luke1 = new Promise((resolve, reject) => {
|
|
|
+ fetch('https://swapi.dev/api/people/1/')
|
|
|
+ .then(res => res.json())
|
|
|
+ .then(luke => console.log(luke))
|
|
|
+ });
|
|
|
+
|
|
|
+ let delay = new Promise((resolve, reject) => {
|
|
|
+ setTimeout(resolve, Math.random() * 10000, 'delay');
|
|
|
+ });
|
|
|
+
|
|
|
+ Promise.race([luke1, delay]).then((x) => {
|
|
|
+ console.log(x);
|
|
|
+ });
|
