Arrow functions and promises

Introduction

In this lesson, we look at:

• arrow functions.
• asynchronous code.
• promises.
• making API calls with the then and catch methods - regular promise syntax.

Arrow functions

Arrow functions don’t use the function keyword and use the => characters instead, hence their name.

We can rewrite the following function:

function logMessage(message) {
  console.log(message);
}

like this:

const logMessage = (message) => console.log(message);

Scrimba video

Asynchronous code

In the GET request API call, we used the async and await keywords to make the call.

That was an example of asynchronous code.

Previously the code we wrote had been executed or returned a value as soon as it was encountered in the program, apart from in the setTimeout method, where we deliberately delay the execution.

Async/await is a fairly recent addition to JavaScript that allows us to work with promises in a more readable fashion, but we need to also look at using promises in the regular way, as you will encounter this syntax in other people’s code.

If you log a message

console.log("I am the first log");

the message is displayed as soon as the code is run.

If you declare a function

function logMessage() {
  console.log("Function called");
}

the function is run as soon as it’s called:

logMessage(); // Function called

The following will be executed after the function has been called.

console.log("I am the second log");

Running all the statements above will log:

// I am the first log
// Function called
// I am the second log

The code is called statement by statement and each statement waits for the previous one to finish before running. This is called synchronous code.

That might seem obvious, but sometimes it’s not a good idea to wait for the previous statement to finish before executing the next one.

If we made a call to a server and the user’s Internet connection was slow or the server was busy, waiting for the call to return before running the next code would create a poor user experience as the interface would appear unresponsive.

Asynchronous code doesn’t wait for the current statement to finish running before executing the next statement.

Promises

Promises are a way to execute code asynchronously. When we call a promise, our code doesn’t wait for a response, but moves on to the next line of code.

Once executed, the promise is pending. At some point it will return and will either have been fulfilled or rejected.

From MDN:

A Promise is in one of these states:

• pending: initial state, neither fulfilled nor rejected.
• fulfilled: meaning that the operation completed successfully.
• rejected: meaning that the operation failed.

Promise chaining

Sometimes what is executed in our fulfilled function also returns a promise. This is called promise chaining.

• Fulfilled states are handled by a Promise’s then method.
• Rejected states are handled by a catch method.

Both these methods take a function as an argument. This is where we can write code to handle the return value of the promise.

These functions, in turn, receive an argument which is the return value of the promise (if successful and the promise has resolved) or the error from a rejected promise.

Most of the time, you won’t write your own promises but will rather use libraries and other existing code built on promises.

then/catch example

We will rewrite the async/await API call in this video to use regular promise syntax.

Code from the video.

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt to answer the questions before checking them against the answers branch of the repo.