Vika 3 years ago
parent
commit
8d663524ea
3 changed files with 160 additions and 0 deletions
  1. 13 0
      js12/index.html
  2. 147 0
      js12/main.js
  3. 0 0
      js12/style.css

+ 13 - 0
js12/index.html

@@ -0,0 +1,13 @@
+<!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>
+  <link href="style.css" rel="stylesheet">
+</head>
+<body>
+ <script src="main.js"></script> 
+</body>
+</html>

+ 147 - 0
js12/main.js

@@ -0,0 +1,147 @@
+//Task fetch basic
+// function receivInfoForLuck (dom, url) {
+// fetch(url)
+//   .then(res => res.json())
+//   .then(luke => {
+//     console.log(luke);
+   
+//     const table = document.createElement('table');
+//     table.style.border = '1px solid';
+//     table.style.borderCollapse = 'collapse';
+//     dom.append(table);
+       
+//     for (let [key, value] of Object.entries(luke)) {
+//       const tr = document.createElement('tr');
+//       const th = document.createElement('th');
+//       th.style.border = '1px solid #000';
+//       const td = document.createElement('td');
+//       td.style.border = '1px solid #000';
+//       td.style.width = '300px'
+//       table.append(tr);
+//       tr.appendChild(th).innerHTML = `${key}`;
+//       tr.append(td);
+
+//       if (value.constructor == Array) {
+//         for (let index of value) {
+//           const p = document.createElement('p');
+//           td.appendChild(p).innerHTML = `${index}\n `;
+//         }
+//       }
+
+//       if (value.constructor!== Array) {
+//         td.innerHTML = `${value}`     
+//       }
+//     }
+//   })
+// } 
+
+// receivInfoForLuck(document.body, 'https://swapi.dev/api/people/1/')
+
+// Task fetch improved
+
+// function receivInfoForLuck (dom, url) {
+//   fetch(url)
+//     .then(res => res.json())
+//     .then(luke => {
+//       console.log(luke);
+     
+//       const table = document.createElement('table');
+//       table.style.border = '1px solid';
+//       table.style.borderCollapse = 'collapse';
+//       dom.append(table);
+         
+//       for (let [key, value] of Object.entries(luke)) {
+       
+//         const tr = document.createElement('tr');
+//         const th = document.createElement('th');
+//         th.style.border = '1px solid #000';
+//         const td = document.createElement('td');
+//         td.style.border = '1px solid #000';
+//         td.style.width = '300px'
+//         table.append(tr);
+//         tr.appendChild(th).innerHTML = `${key}`;
+//         tr.append(td);
+
+//         let numberForButton = 1;
+
+//         function createInput (value, buttonNumber) {
+          
+//           const input = document.createElement('input');
+//           input.type = 'button';
+//           input.value = `${buttonNumber}`;
+//           td.appendChild(input);
+//           numberForButton ++; 
+//           input.onclick = () => receivInfoForLuck(document.body, value);
+//         }
+       
+//         if (value.constructor == Array) {
+          
+//           for (let index of value) {
+            
+
+//             if (typeof(index) !== 'string') {
+//               const p = document.createElement('p');
+//               td.appendChild(p).innerHTML = `${index}\n `;
+//             }  
+//               else if (index.includes('https://swapi.dev/api/')) {
+//               createInput(index, numberForButton);
+//             } 
+//               else {  
+//                 const p = document.createElement('p');
+//                 td.appendChild(p).innerHTML = `${index}\n `;
+//               }
+//           }
+//         }
+//         if (value.constructor!== Array) {
+          
+//           if (typeof(value) !== 'string') {
+//             td.innerHTML = `${value}`; 
+//           }
+//             else if (value.includes('https://swapi.dev/api/')) {
+//               createInput(value, numberForButton);
+//           } 
+//               else {
+//                 td.innerHTML = `${value}`;   
+//               }
+//         }
+//       }
+//     })
+//   } 
+  
+// receivInfoForLuck(document.body, 'https://swapi.dev/api/people/1/');
+
+
+//Task myfetch
+
+function myfetch(url){
+  return new Promise(function (resolve, reject){
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.send();
+    xhr.onload = function() {
+
+      if (xhr.status != 200) { 
+        return reject(`Ошибка ${xhr.status}: ${xhr.statusText}`);
+        
+      } else { 
+        let value = JSON.parse(xhr.response);
+        return resolve(value);
+        }
+      xhr.onerror = function() {  
+        return reject('Запрос не удался');
+    };
+    };
+  })
+}
+
+// let a = myfetch('https://swapi.dev/api/people/1/');
+// a.then(res => console.log(res));
+
+
+//TASK race
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms*Math.random()), ms))
+
+Promise.race([
+  myfetch('https://swapi.dev/api/people/1/'),
+  delay(600)
+]).then(obj => console.log(obj));

+ 0 - 0
js12/style.css