1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Introduction to JavaScript Promises

Introduction to JavaScript Promises

Contents

keyboard_tab
JavaScript Promises
Introduction to JavaScript Promises
Overview
Difficulty
Intermediate
Duration
6m
Students
45
Ratings
4.2/5
starstarstarstarstar-border
Description

This practical course offers a brief introduction to JavaScript Promises.

Learning Objectives

  • Learn what is a JavaScript Promise
  • Learn what are the three states of a JavaScript Promise
  • Learn how to create a JavaScript Promise
  • Learn what are and how to write then and catch statements for a JavaScript Promise

Intended Audience

This course is intended for anyone who wants to learn about JavaScript Promises.

Prerequisites

Anyone with an interest in JavaScript in general.

Transcript

Introduction to JavaScript Promises. A Promise is a special JavaScript object that represents a future value. On the screen, I have this circle representing the Promise object. When the Promise is created, its initial state is pending. This works like a real-world Promise. If I were to promise to get you food, the outcome of whether or not you will receive that food is pending.

Next, the Promise will go through a settlement process, which will return one of two states. It will either be fulfilled, the operation was completed successfully, I brought you that food, or it will be rejected, the operation failed, I never brought you that food. When the Promise is fulfilled, we then settle that fulfillment using a then statement. You received the food, then you ate it. When the Promise is rejected, a then statement could be used to handle the rejection. But typically, a catch statement is used to catch the error.

Now, some built-in JavaScript functions and web APIs will return a Promise object. JavaScript also has a Promise constructor that can be used within functions to return a Promise object. Transitioning to the code editor, I'm gonna create a function that returns a random number using a Promise. I will begin by typing const getRandNum = =>. Now, inside of the arrow function, I'm gonna invoke the Promise constructor, return new Promise parentheses. So this is just like a regular object constructor, where I have to use the new keyword to instantiate this. The Promise constructor takes a function as a argument.

So, now, I will put in that arrow function that's gonna begin with two arguments, parentheses resolve, reject => {}. The resolve argument is invoked when the Promise is fulfilled. I'm gonna resolve a random number generator. I will type resolve parentheses, and I will pass this argument, Math.floor parentheses Math.random parentheses * 10. And this is a function that will return a number between one and 10. Now this Promise function is ready to test out.

So, down below, I'm gonna type getRandNum parentheses. Next, I'm gonna chain the then statement. When the Promise is fulfilled, the then statement is used to settle the data. .then. And the then statement takes a function as a argument. So, number => console.log number. Number is the value that is returned by the Promise object. And now, I will execute the function call. And to the right is the number two. And this works. But what would happen if I didn't use the then statement? I'm gonna convert this function call to a variable value.

I'm gonna comment out the then statement, and to the left of the function call, I will type const number = getRandNum. And I will console.log the number and execute this again. And to the right is the Promise object. Without the then statement, you will always get the Promise object. The then statement is needed to access the result. I'm gonna undo the changes I just made and put the function call back to its previous state.

So how is a rejection handled with a Promise? Below the resolve statement, I'm gonna add a reject statement, reject parentheses. And as a argument for the reject statement, I'm gonna put in a broken random number generator. I'm breaking this code by omitting the mandatory parentheses after the random method. Going back to the function call below, I'm gonna chain the catch statement to the then statement. .catch passing through an arrow function as a argument, error => console.log error. The goal is to catch the error. I will execute this function again, and there's a value of three.

I was expecting a not a number error, so what happened? Promises are useful when dealing with situations where you might not get a result, such as requesting data from a server, and the server is down. The random number generator in the resolve statement is never gonna fail. And because of that, the reject statement will never have a opportunity to execute. So for demonstration purposes, I'm gonna comment out the resolve statement and I will execute this function again. And there's the NaN error message, which stands for not a number. And that's it. Thanks for watching, at Cloud Academy.

About the Author
Students
3054
Labs
20
Courses
48
Learning Paths
6

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics