async

2025-04-02 14:45:04 +02:00 · 2025-04-02 14:45:04 +02:00 · 9a85838e3f
commit 9a85838e3f
3 changed files with 70 additions and 0 deletions
--- a/data/data.json
+++ b/data/data.json
@ -0,0 +1,3 @@
+{
+    "name":"Jan"
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script src="js/script.js" defer></script>
+</head>
+<body>
+    
+    <div id="ele">hello</div>
+
+</body>
+</html>
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,52 @@
+const el = document.querySelector('#ele');
+
+function parse(data) {
+return new Promise((resolve, reject) => {
+  const name = data.name;
+  if (!name || !['Jan', 'Zuzia', 'Jakub'].includes(name)) {
+    reject(new Error('Invalid name in JSON'));                        
+  } else {
+    resolve(name);
+  }   
+}); 
+}
+
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+
+function f1 (url='./data/data.json') {
+ 
+    return fetch (url)
+        .then( (res) => {
+        
+            if (!res.ok) {
+              throw new Error(`HTTP error! status: ${res.status}`);
+            }
+
+            return res.json();
+        })
+        .then ( (data) => {
+         
+            return parse(data);
+            // el.textContent = parse(data);
+           
+          console.log ("ok");
+        })
+        .then((name) => {
+       
+            // Dodajemy opóźnienie przed aktualizacją treści elementu
+            return delay(5000).then(() => name); // Opóźnienie 2 sekundy
+        })
+        .then ((name)=>{
+            console.log("5s");
+            el.textContent = name;
+        })
+        .catch(error => {
+            console.error('Error http request or parsing JSON:', error);
+        });
+
+}
+
+f1()