hinzugefügt Promise Interface als AJAX Aufruf,ajax callback hell

javascript/Javascript Expert/chapter16/PromiseAsAjaxCall.js

@@ -0,0 +1,43 @@
+const countryContainer = document.querySelector(".countries");
+const request = fetch("https://restcountries.com/v3.1/name/slovenia");
+console.log(request);
+
+function renderCountry(data) {
+  const html = `
+    <article class="country">
+      <img class="country__img" src="${data.flags.png}" />
+      <div class="country__data">
+        <h3 class="country__name">${data.name.common}</h3>
+        <h4 class="country__region">${data.region}</h4>
+        <p class="country__row"><span>👫</span>${(
+          +data.population / 1000000
+        ).toFixed(1)} Mil</p>
+  
+      </div>
+    </article>
+  `;
+  countryContainer.innerHTML += html;
+}
+// man kann einen ajax Aufruf Mithilfe Promise Datastruktur ausgeführt werden
+const countryData = function (country) {
+  fetch(`https://restcountries.com/v3.1/name/${country}`) // die Metzhode fetch gibt Promise DS zurück
+    .then(response => {
+      console.log(response);
+      return response.json(); // die Methode gibt pending Promise zurück, und wenn die Daten erfolreich erhaltet werden,
+      // wird ein Promise mit json Daten zurück gegeben
+    })
+    .then(data => {
+      // die zweite Methode then() behandelt dann ein JSON, in unserem Fall bekommt man schon geparsed JSON Data
+      console.log(data[0]);
+      renderCountry(data[0]);
+      const neighbour = data[0].borders[0];
+      if (!neighbour) return;
+      return fetch(`https://restcountries.com/v3.1/alpha/${neighbour}`);
+    })
+    .then(response => {
+      response.json();
+    })
+    .then(data => renderCountry(data, "neighbour"));
+};
+
+countryData("germany");

javascript/Javascript Expert/chapter16/ajaxCalls.js

@@ -28,7 +28,7 @@ function getCountryData(country) {
   request.addEventListener("load", function () {
     const [data] = JSON.parse(this.responseText);
     console.log(data);
-    renderCountry(data);
+    renderCountry(data[0]);
   });
 }
 getCountryData("austria");

javascript/Javascript Expert/chapter16/callbackHell.js

@@ -0,0 +1,27 @@
+setTimeout(() => {
+  console.log("1 second");
+  setTimeout(() => {
+    console.log("2 second");
+    setTimeout(() => {
+      console.log("3 second");
+      setTimeout(() => {
+        console.log("4 second");
+        setTimeout(() => {
+          console.log("5 second");
+          setTimeout(() => {
+            console.log("6 second");
+            setTimeout(() => {
+              console.log("7 second");
+              setTimeout(() => {
+                console.log("8 second");
+                setTimeout(() => {
+                  console.log("9 second");
+                }, 1000);
+              }, 1000);
+            }, 1000);
+          }, 1000);
+        }, 1000);
+      }, 1000);
+    }, 1000);
+  }, 1000);
+}, 1000);

javascript/Javascript Expert/chapter16/index.html

@@ -11,6 +11,6 @@
       <div class="countries"></div>
       <div class="images"></div>
     </main>
-    <script src="ajaxCall.js"></script>
+    <script src="PromiseAsAjaxCall.js"></script>
   </body>
 </html>