async

wesbos · wesbos · commit f3d3946a1b1c · 2019-11-13T16:32:46.000-05:00
diff --git a/playground/async-await-error-handling-FINISHED.html b/playground/async-await-error-handling-FINISHED.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Async Await</title>
+  <link rel="stylesheet" href="../base.css">
+</head>
+
+<body>
+  <script>
+    function wait(ms = 0) {
+      return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+      })
+    }
+
+    function makePizza(toppings = []) {
+      return new Promise(function (resolve, reject) {
+        // reject if people try with pineapple
+        if (toppings.includes('pineapple')) {
+          reject('Seriously? Get out 🍍');
+        }
+        const amountOfTimeToBake = 500 + (toppings.length * 200);
+        // wait 1 second for the pizza to cook:
+        setTimeout(function () {
+          // when you are ready, you can resolve this promise
+          resolve(`Here is your pizza 🍕 with the toppings ${toppings.join(' ')}`);
+        }, amountOfTimeToBake);
+        // if something went wrong, we can reject this promise;
+      });
+    }
+
+    function handleError(err) {
+      console.log('ohhh noooo');
+      console.log(err);
+    }
+
+    function handleDisgustingPizza() {
+
+    }
+    async function go() {
+      const pizza = await makePizza(['pineapple']).catch(handleDisgustingPizza);
+      return pizza;
+    }
+
+    // catch it at run time
+    go().catch(handleError);
+    // make a safe function with a HOF
+    function makeSafe(fn, errorHandler) {
+      return function () {
+        fn().catch(errorHandler)
+      }
+    }
+
+    const safeGo = makeSafe(go, handleError);
+
+    safeGo();
+
+  </script>
+</body>
+
+</html>
diff --git a/playground/async-await.html b/playground/async-await.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Async Await</title>
+  <link rel="stylesheet" href="../base.css">
+</head>
+
+<body>
+  <script>
+    function wait(ms = 0) {
+      return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+      })
+    }
+
+    function makePizza(toppings = []) {
+      return new Promise(function (resolve, reject) {
+        // reject if people try with pineapple
+        if (toppings.includes('pineapple')) {
+          reject('Seriously? Get out 🍍');
+        }
+        const amountOfTimeToBake = 500 + (toppings.length * 200);
+        // wait 1 second for the pizza to cook:
+        setTimeout(function () {
+          // when you are ready, you can resolve this promise
+          resolve(`Here is your pizza 🍕 with the toppings ${toppings.join(' ')}`);
+        }, amountOfTimeToBake);
+        // if something went wrong, we can reject this promise;
+      });
+    }
+
+    async function go() {
+      console.log('Starting');
+      await wait(2000);
+      console.log('running');
+      await wait(200);
+      console.log('ending');
+    }
+
+    // go();
+
+    async function makeDinner() {
+      const pizzaPromise1 = makePizza(['pepperoni']);
+      const pizzaPromise2 = makePizza(['mushrooms']);
+      const [pep, mush] = await Promise.all([pizzaPromise1, pizzaPromise2]);
+      console.log(pep, mush);
+    }
+
+    makeDinner();
+
+    // // Function declaration
+    // async function fd() { }
+
+    // // arrow function
+    // const arrowFn = async () => { }
+
+    // // call back
+    // window.addEventListener('click', async function () {
+
+    // })
+
+    // //
+    // const person = {
+    //   // method
+    //   sayHi: async function () {
+
+    //   },
+    //   // method shorthand
+    //   async sayHello() {
+
+    //   },
+    //   // function property
+    //   sayHey: async () => {
+
+    //   }
+    // }
+  </script>
+</body>
+
+</html>
diff --git a/playground/promise-chain-FINISHED.html b/playground/promise-chain-FINISHED.html
@@ -46,6 +46,23 @@
 
     const go = document.querySelector('.go');
 
+    async function animate2(e) {
+      const el = e.currentTarget;
+      // 1. Change the text to GO when clicked.
+      el.textContent = 'GO';
+      // 2. Make it a circle after 2 seconds
+      await wait(200);
+      el.classList.add('circle');
+      await wait(500);
+      el.classList.add('red');
+      await wait(250);
+      el.classList.remove('circle');
+      await wait(500);
+      el.classList.remove('red');
+      el.classList.add('purple');
+      await wait(500);
+      el.classList.add('fadeOut');
+    }
 
     function animate(e) {
       const el = e.currentTarget;
@@ -76,7 +93,7 @@
         })
     }
 
-    go.addEventListener('click', animate);
+    go.addEventListener('click', animate2);
 
     go.addEventListener('clickXXXX', function go(e) {
       const el = e.currentTarget;
