Asynchronous JavaScript & Callbacks

Wilson Espina

What did we do last lesson?

Learning Objectives

At the end of this class, you will be able to:

Describe what asynchronous means in relation to JavaScript
Pass functions as arguments to functions that expect them.
Write functions that take other functions as arguments.
Build asynchronous program flow using Fetch

Exit Ticket Questions

The code-alongs required lots of writing syntax - Can we have this beforehand?

Agenda

Asynchronous Programming
Functions & Callbacks
Promises

Classroom Resources

Pull changes from the wilson-espina/jsd-9-resources repo to your computer
In your editor, open the following folder: Documents/JSD/jsd-9-resources/11-async-callbacks

Asynchronous Programming

Synchronous Code


let status
function doSomething() {
    for (let i	= 0; i < 1000000000; i++) {
        numberArray.push(i)
    }
    status = 'done'
    console.log('First function done')
}
function doAnotherThing() {
    console.log('Second function done')
}
function doSomethingElse() {
    console.log('Third function: '+ status)
}

doSomething()

doAnotherThing()

doSomethingElse()


// result in console
// (after a few seconds):

> "First function done"
> "Second function done"
> "Third function: done"

Synchronous Code

Statements are executed in order, one after another.
Code blocks program flow to wait for results.
Most JavaScript code is synchronous.

Asynchronous Code

Code execution is independent of the main program flow.
Statements are executed concurrently.
Program does not block program flow to wait for results.
Certain JS statements are asynchronous by default.

Asynchronous Program Flow


$('button').on('click', doSomething);

$.ajax(url, function(data) {
    doAnotherThing(data)
});

fetch(url).then(response => {
    if (response.ok) {
	    return response.json();
    } else {
        console.log('There was a problem.');
    }
}).then(doSomethingElse);

Approaches to Asynchronous Program Flow

Functions & Callbacks

How many arguments in this code?


$('button').on('click', function() {
	// your code here
});


								$('button').on(argument1, argument2);

Approaches to Asynchronous Program Flow

Functions are first-class objects

Can store a function as a variable value.
Can return a function from another function.
Can pass a function as an argument to another function.

Functions are first-class objects

Can store a function as a variable value.


const getWeather = (weatherUrl, city, apiKey) => {
    $.ajax({
        url: weatherUrl + city + '&appid=' + apiKey,
        success: function (response) {
            updateUISuccess(response.main.temp)
        },
        error: function () {
            updateUIError();
        },
    });
};

Functions are first-class objects

Can return a function from another function.


const programmeModule = (() => {
    let programmes = [];
    return {
        addProgramme: function(newProgramme) {
            programmes.push(newProgramme);
        },
        getProgrammes: function() {
            return programmes
        }
    }
})()

Functions are first-class objects

Can pass a function as an argument to another function.


function helloWorld() {
    console.log("Hello world");
}

setTimeout(helloWorld, 1000);

Higher-Order Function

A function that takes another function as an argument, or that returns a function.

Higher-Order Function - Example

setTimeout()


setTimeout(function, delay);

function is a function(reference or anonymous.
delay is a time in milliseconds to wait before the first argument is called.

Settimeout


setTimeout(() => {
  console.log("Hello world")
}, 1000);

setTimeout with anonymous function argument


function helloWorld() {
  console.log("Hello world");
}

setTimeout(helloWorld, 1000);

setTimeout with named function argument

Callbacks

Callbacks

A function that is passed to another function as an argument, and that is then called from within the other function.
A callback function can be anonymous (as with setTimeout() or forEach()) or it can be a reference to a function defined elsewhere.

Open up: 00-callback-codealong

Create callback functions

starter-code > 01-callback-exercise

In your editor, open script.js.
Follow the instructions to create the add, showAnswer, calcResult, and subtract functions, and to call the calcResult function using the add and subtract functions as callbacks.
Test your work in the browser and verify that you get the expected results.
BONUS: Update the showAnswer function to change the content of the element with the id value 'operator' to a plus symbol after the user clicks the Add button, or to a minus symbol after the user clicks the Subtract button.

Promises

Callback Hell


doSomething((result) => {
  doSomethingElse(result, (newResult) => {
    doThirdThing(newResult, (finalResult) => {
      console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

Approaches to Asynchronous Program Flow

Promises

Traditional Callback:


doSomething(successCallback, failureCallback);

Callback using a promise:


doSomething()
  .then(successCallback)  // work with result
  .catch(failureCallback) // handle error

Multiple Callbacks with Promises


doSomething()
  .then(result1 => doSomethingElse(result1))
  .then(result2 => doThirdThing(result2))
  .then(result3 => {
    console.log('Got the final result: ' + result3)
  })
  .catch((error) => {
    console.log('There was an error: ' + error);
  });

Error Handling with Promises

Creating Promises



const fooPromise = () => {
  return new Promise(function(resolve, reject) {




  });
}

Creating Promises



const fooPromise = () => {
  return new Promise(function(resolve, reject) {
	if (/* everything turned out fine */) {
	  resolve("Stuff worked!");
	} else {
	  reject(Error("It broke"));
	}
  });
}

Resolve and Reject are callbacks

Creating Promises - SetTimeout



const fooPromise = () => {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      resolve('foo')
    }, 5000)
  });
}

fooPromise()
  .then(value => {
  console.log(value) /* expected output: "foo" */
});

Promises

At any stage, a Promise will be in one of these 4 states:

Pending: Initial state, not fulfilled or rejected.
Fulfilled: operation completed successfully.
Rejected: operation failed.
Settled: It has been fulfilled or rejected already.

Fetch with Promises


fetch(url)
  .then(function (response) {
    if (response.ok) {
      return response.json();
    } else {
      throw 'Network response was not ok.';
    }
  }).then(function (data) {
    // DOM manipulation
  }).catch(function (error) {
    // handle lack of data in UI
});

Error Handling for Initial Fetch Request

Open up: 02-fetch-codealong

starter-code > 03-async-lab

In your editor, open script.js.
Follow the instructions to add a Fetch request for weather data that uses the results of the existing post lookup.

Learning Objectives - Review

Describe what asynchronous means in relation to JavaScript
Pass functions as arguments to functions that expect them.
Write functions that take other functions as arguments.
Build asynchronous program flow using Fetch.

Look Ahead to Next Lesson

Request data from Google Maps and TFL web services.
Implement the geolocation API to request a location.
Use Postman to construct and test an API request.
Process a third-party API response and share location data on your website.
Search documentation needed to make and customise third-party API requests.

Homework

Exit Ticket

(Lesson #11)

Asynchronous JavaScript & Callbacks

Wilson Espina

What did we do last lesson?

Learning Objectives

Exit Ticket Questions

Agenda

Classroom Resources

Asynchronous Programming

Synchronous Code

Synchronous Code

Asynchronous Code

Asynchronous Program Flow

Approaches to Asynchronous Program Flow

Functions & Callbacks

How many arguments in this code?

Approaches to Asynchronous Program Flow

Functions are first-class objects

Functions are first-class objects

Functions are first-class objects

Functions are first-class objects

Higher-Order Function

Higher-Order Function - Example

Settimeout

Callbacks

Callbacks

20 mins

Promises

Callback Hell

Approaches to Asynchronous Program Flow

Promises

Multiple Callbacks with Promises

Error Handling with Promises

Creating Promises

Creating Promises

Creating Promises - SetTimeout

Promises

Fetch with Promises

Error Handling for Initial Fetch Request

20 mins

Learning Objectives - Review

Look Ahead to Next Lesson

Homework

Exit Ticket