Async/Await

Author: pktcodes

app.js

@@ -1,19 +1,44 @@
 // callbacks, promises, async/await
-// what if
-//  no resolve - then will no execute
-//  one is rejected - dependent functionality will get ignored
+// must have async to use await
+// await waits till promise is settled i.e either resolved or rejected
+// error handling - try/catch
+// async function by itself always returns a promise so we can use .then on it
 
 const heading1 = document.querySelector(".heading-1");
 const heading2 = document.querySelector(".heading-2");
 const heading3 = document.querySelector(".heading-3");
 const btn = document.querySelector(".btn");
 
-btn.addEventListener("click", () =>
-  addColor(1000, heading1, "red")
-    .then(() => addColor(2000, heading2, "green"))
-    .then(() => addColor(1000, heading3, "blue"))
-    .catch((error) => console.log(error))
-);
+/* Async/Await Syntax */
+// async function someFunction() {
+//   await
+// }
+
+// const otherFunction = async () => {
+//   await
+// };
+
+btn.addEventListener("click", async () => {
+  // displayColor().then((data) => {
+  //   console.log(data);
+  // });
+
+  const result = await displayColor();
+  console.log(result);
+});
+
+/* This returns a promise */
+async function displayColor() {
+  try {
+    const first = await addColor(1000, heading1, "red");
+    await addColor(2000, heading2, "green");
+    await addColor(1000, heading3, "blue");
+    console.log(first);
+  } catch (error) {
+    console.log(error);
+  }
+  return "hello";
+}
 
 function addColor(time, element, color) {
   return new Promise((resolve, reject) => {

promise-dom-example.js

@@ -0,0 +1,29 @@
+// callbacks, promises, async/await
+// what if
+//  no resolve - then will no execute
+//  one is rejected - dependent functionality will get ignored
+
+const heading1 = document.querySelector(".heading-1");
+const heading2 = document.querySelector(".heading-2");
+const heading3 = document.querySelector(".heading-3");
+const btn = document.querySelector(".btn");
+
+btn.addEventListener("click", () =>
+  addColor(1000, heading1, "red")
+    .then(() => addColor(2000, heading2, "green"))
+    .then(() => addColor(1000, heading3, "blue"))
+    .catch((error) => console.log(error))
+);
+
+function addColor(time, element, color) {
+  return new Promise((resolve, reject) => {
+    if (element) {
+      setTimeout(() => {
+        element.style.color = color;
+        resolve();
+      }, time);
+    } else {
+      reject(new Error(`There is no such element ${element}`));
+    }
+  });
+}