02-Async.md

title	logoImg	theme	transition	highlightTheme	slideNumber	loop	enableMenu	enableChalkboard
Functions	https://raw.githubusercontent.com/HansUXdev/JavaScript-First/2acf5840c15af96602aceb66303ea69c5b75e344/logo.svg	night	slide	monokai	true	true	false	false

<style> /* Remove the background color and make mongo commands more visible by adding color */ .line.focus{ background:none; font-size: xx-large; color: #5cc4ea; } </style>

Section Overview

This chapter should cover the following:

1. Async Explaination
2. Callback
3. Promises
   • returned promises
   • dealing with rejection
   • multiple promises
4. Async Await

---

What is Async?

---

What is a Promise?

---

Dealing with Rejection

---

Callback Functions

Callback

function callbackFunction(var1, callback) {
    callback(var1);		
}

callbackFunction(1, function (x) { console.log(x); })

{.fragment .current-only data-code-focus=1-5}

---

Promises

const myPromise = new Promise((resolve, reject) => {  
    let condition;  
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

---

Generator

function callbackFunction(var1, callback) {
    callback(var1);		
}

callbackFunction(1, function (x) { console.log(x); })

{.fragment .current-only data-code-focus=1-5}

---

Async Functions

(async ()=> {
  try {
    // let something = await fetch();
    const URI = 'https://www.breakingbadapi.com/api/characters/1';
    const DATA = await fetch(URI);
    const json = await DATA.json();
    console.log(monsters);
  } 
  catch (error) {
     console.log(error)
  }
  finally {
  // settled (fulfilled or rejected)
  }
})();

Begin the IIFE with async {.fragment .current-only data-code-focus=1-1}

ENd the IIFE {.fragment .current-only data-code-focus=11-11}

Add Try, Catch, Finally {.fragment .current-only data-code-focus=2-10}

Write your code in Try statement {.fragment .current-only data-code-focus=2-4}

Use Catch to handle the errors and reject Promises{.fragment .current-only data-code-focus=2-10}

Then in the Finally block handle {.fragment .current-only data-code-focus=2-10}

Add Try, Catch, Finally {.fragment .current-only data-code-focus=2-10}

This defines the doument type as html. {.fragment .current-only data-code-focus=1-1}

---