Skip to content

Latest commit

 

History

History
184 lines (143 loc) · 6.47 KB

javascript-9-async.md

File metadata and controls

184 lines (143 loc) · 6.47 KB
Raw

JavaScript 9 - Async, Callbacks, Promises

Week 6 Keywords and Questions

  • What is a callback function?
  • Why do we use callbacks?
  • How many things can be returned from a callback?
  • How do I get data out of a callback?
  • Define a promise in your own words.

Prerequisites

  • Know how to create a JavaScript function, named and anonymous.
  • Know what Asynchronous means.

Motivation

  • Callbacks are an important part of JavaScript's (and any asynchronous language's) history. You will learn about "callback hell" and how promises help you "reach heaven" again.

Objectives

Participants will be able to:

  • Identify and write callbacks and promises.
  • Know when to use a promise.

Specific Things to Learn

  • callback
  • new Promise(((resolve, reject) => {}))
  • promise.then()
  • Promise.all()
  • async / await
  • done()

Materials

Lesson

Things to Remember

  • A callback is just a function that is called when another function is done.
  • We have them because JavaScript is asynchronous.
  • A promise is a class of object. Think of it as a literal promise. Like a task that you promise to finish later.
  • It's built into most browsers (all but IE: Browser Support).
  • It's different from the object return by jQuery's AJAX but similar.
  • It's the object returned by fetch (like AJAX but built into most browsers)

Guided Practice

  1. Open up dev console in browser.
  2. Write a function name counter and pass in another function(the callback) named cb as parameter.
function counter(cb) {
  console.log('inside counter function ');
  cb(); //here callback function gets called by counter()
}
counter(function () {
  console.log('inside callback function');
});
  1. If we again call counter() inside cb() definition then we can see a pattern of deep nesting, known as callback hell.
function counter(cb) {
  console.log('inside counter function ');
  cb();
}

counter(function () {
  console.log('inside callback function');
  counter(function () {
    console.log('inside callback function');
  });
});

There's got to be an easier way to write things that depend on each other, right? Promises.

  1. Create a Promise and pass a callback to its then method. Create callback that uses setTimeout to mimic latency (network/database delay). The callback passed to setTimeout will resolve the promise (use the parameter).
  2. Chain another then with a callback that console.logs something to show the flow of execution.
// Create a variable boolean
const isPersonHappy = true;

// The function passed to new Promise is called the executor.
// The arguments resolve and reject are callbacks functions provided by JavaScript itself.
const willIGetNewPhone = new Promise((resolve, reject) => {
  // Our code is only inside the executor.
  if (isPersonHappy) {
    const phone = {
      brand: "Pixel",
      color: "black",
    };
    resolve(phone);
  } else {
    const reason = new Error("The person is not happy");
    reject(reason);
  }
});

// This a function that returns a Promise. That Promise is constructed using a static method.
const showOff = function (phone) {
  const message =
    "Hey friend, I have a new " + phone.color + " " + phone.brand + " phone";
  return Promise.resolve(message);

  // This is equivalent to using this constructor for the Promise Object
  // return new Promise ((resolve, reject) => {
  //   resolve(message);
  // });
};

// Inside this function we will chain our Promises.
const askPerson = function () {
  willIGetNewPhone
    .then(showOff)
    .then((fulfilled) => console.log(fulfilled))
    .catch((error) => console.log(error.message));
};
askPerson();

In general, you don't create promises. You work with promises while doing asynchronous tasks.

// Imagine working with a function that has to check if a User is Valid from a URL
function checkWorker(url) {
  // You will need to use fetch to call the URL with the list of users
  fetch(url)
    // fetch return a promise object and you need to use then to process the response
    .then((response) => {
      // First: Ensure the status of the service
      if (response.status === 404) {
        // No service worker found. Probably a different app. Reload the page.
        window.location.reload();
      } else {
        // Service worker found. Proceed as normal.
        registerValid(Url);
      }
    })
    // The catch method allows you to manage errors inside Promise
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode'
      );
    });
}

Independent Practice

Play around in your favorite browser's dev console using the fetch method to understand working with promises

Challenge

  • Create several promises, each with callbacks with different setTimeout times.
  • Then call them in parallel, which promise method can you use for that?
  • Chain a catch method (like how you did with then) to this promise, and pass another callback. Which promise parameter can you use to pass control from then to catch?
  • Look at the object returned by creating a promise. What properties does it have? Look for its status.
  • Check its status again, has it changed?

Supplemental Materials