Take this
course

Software Development / Web Development

Learning JavaScript Promises: Practical Applications in ES6 and AngularJS

Take your first steps into the world of JavaScript Promises to effortlessly code in an asynchronous environment

Description

Promises are the new rage! Within a year, they will be an indispensable tool for JavaScript developers, both frontend and backend. New navigator APIs such as battery status, geolocation, indexedDB, as well as libraries and frameworks such as Angular, Ionic, and more have already adopted Promises as the best way to handle asynchronous flow programming. From the most simple async tasks to parallel, series, and other convoluted flows, Promises will make your code clean, easy to understand, and actually fun to write.


Promises—if you’ve ever coded an AJAX call, chances are you used them. But did you know they can be used to avoid race conditions, or that you can combine them into complex flows, and ultimately that they can make coding in asynchronous environments a breeze? Learning JavaScript Promises: Practical Applications in ES6 and AngularJS will help you learn all this and more. All the features are backed with a real-life examples, from a local weather forecast to a movie search on iTunes!


Starting from the basics of resolving and rejecting Promises, we will gradually move on to controlling flows by redirecting outcomes, making failures into successes, and vice versa, and modifying data to make it ready for display. Once you have familiarized yourself with Promises, we will review the many awesome ways of combining Promises, such as waiting for all tasks or grabbing the first task to complete. Finally, we will ensure that you fully master Promises with a section on extra Promises that will provide further useful information and examples. Throughout the course, you will apply every single feature you have discovered by creating meaningful widgets that utilize Promises, both in ES6 and in AngularJS.


This course will not only make you feel comfortable utilizing Promises when they are provided, but will also make you appreciate how much easier they can make your programming in the future. You will gain hands-on, real-life knowledge and experience of a great technology that is on the rise.

Full details

Curriculum

  • Introducing Promises
    The Course Overview
    This video will offer an overview of the course.
    2:18
    Promises – You've Been Using Them All Along
    Many processes in JavaScript are asynchronous and, thus, can be confusing for developers whose experience is mostly synchronous. Promise objects allow for a clear way to handle such processes. • Asynchronous objects can be launched and represented by deferred objects • Their outcome can be handled represented with the help of promise objects • The API data can be displayed on the screen using $http
    7:16
    Make Me a Promise
    Some services ($http) return promise objects when called, but other processes do not. Often, a developer will need to create their own asynchronous process, such as waiting for some user interactions or the completion of a navigator action. The $q service provides the tool to handle such cases. • Create a new deferred object with the help of $q.defer • Launch an asynchronous action • Use the corresponding promise object to handle the outcome of the action
    6:12
  • Resolving and Rejecting ES6 Promises
    Creating ES6 Promises
    Promises have become so popular that the new iteration of JavaScript ES6 implements them. This implementation is slightly different than the Angular $q service. We will learn how to create promises using the ES6 promises API. • Create an executor • Create an promise with this executor • Use the two parameters callbacks
    9:12
    There Are Only Two Types of Promises in This World
    Promises allow us to code parts of an asynchronous flow. Flows rarely follow a single direction; there are cases where things go awry. Promises prepare for these instances by having two possible outcomes: success and failure. • Plan an asynchronous flow • Using reject to signal a failure and resolve to signal a success • Handle what’s next in both cases
    8:40
    Deciding What’s Next
    Asynchronous process flows that are handled by promises are all about clarity of code and outcomes. Here, we will learn about the various ways to set callbacks for each case: 1. success only 2. failure only 3. both success and failure Fulfilling promises is similar to a try catch clause; Angular added the .finally callback to handle a case where something needs to be done regardless of success or failure. • Use .then for success only or success + failure • Use .catch for rejection only • Understand Angular’s .finally callback
    10:56
    No Second Chance
    Some processes and flows require repeated information to be passed at unexpected times. Other flows, though of an unknown duration, expect their outcome to be final. Promises do not allow for second chances and, thus, are great tools to cover the latter of these cases. • Attempt to reject an already resolved promise or change the resolution value of a promise • Only a single value can be passed as a resolution value and this is why it's not a problem • Use the finality of a settlement to our advantage
    9:58
    Callbacks Execution and Timing
    A lot of processes will need to conduct more than one task upon completion of an action. Although promises are strongly single-chance and single-value, when it comes to the callbacks, developers can add as many as they want, even after the promise has been settled, and, thus, allow for several actions to be added from various parts of an application. • Adding several callbacks on a promise and review their execution order • The paths that will not be walked • Add callbacks after a promise has settled
    10:46
    The Future Is Coming – Angular v2 Promises
    Angular 2 is coming and has everyone guessing with its breaking changes and new features. We will review where promises stand in that major overhaul. • Install dependencies and gulp • Add a constructor on component • Use fetch to perform an AJAX call
    4:15
  • One Man's Garbage Is Another Man’s Gold
    Chaining Promises
    JavaScript applications are becoming more powerful and complex, and so are corresponding asynchronous flows. One major trouble is to accomplish several processes leading to the next, even though the time taken for completion is unknown and the main thread doesn’t wait for these processes. Promises help controlling such flows by using chaining, which not only allows to run processes one after the other but also to alter the value that comes out of the fulfillment of this, or even the success or failure path taken by the promise. • Create a flow by chaining several promises • Prepare data to be ready for display • Change resolves into rejects and vice versa
    12:05
    Making API Data User-ready
    Promises that represent one action resolve with a certain value. This value may be suitable for one flow, but not for another. Returning a normal value allows you to modify the resolve value of a promise to make it more relevant to an outlying context. In practice, this is really useful when grabbing API content to be displayed to a user. • Modify data received from a promise • Return the modified data • Use a new resolution value to display data
    9:14
    Changing Successes into Failure
    When abstracting processes in general and not only asynchronous ones, we make an assumption as to what successes and what failures are. However, depending on a situation, what appears to be a success for one block, could actually represent a failure for the whole flow. Promises make it very easy to switch from a success to a failure in the next promise, and we will learn how to accomplish this. We will also give practical examples as to why this would be a useful feature. • Understand why a success would need to be turned into a failure • Return $q.reject to turn a success into a failure • Handle the failure in the surrounding promise
    8:31
    Turning Failure into Success
    In the same vein as the previous video, this will cover cases where a certain block of a process needs to be transformed from a failure into a success. Promises allow us to do this by returning anything but a rejected promise. • Create a failing process • Return a value within a .catch callback • Handle the success that has been processed
    7:43
  • Combining Promises
    Parallel and Independent Tasks
    More than one action is needed and wherever possible, it is better to complete these actions in parallel without having to wait for the other to complete. We will use two API calls and display data in a simple case where the calls are independent of each other. • Call several APIs • Handle responses independently • Review when each action and completion occurs
    4:17
    Interdependent Tasks
    Sometimes, several tasks need to be completed before a process can move on. A solution to this issue is to complete them one after the other. However, wherever possible, it is always more efficient to run tasks in parallel. $q.all allows you to combine promises in a way that must all complete before the surrounded process continues. • Create two promises • Combine them into a new promise using $q.all • Handle the array of results
    8:06
    Series Flow - with a Twist
    In some cases, we do not know how many times a particular asynchronous task is expected to be run before stopping it. Using promises, we will be able to handle "n" tasks in a series. • Create a single API call • Redefine a promise with each iteration • Handle the final result
    7:26
  • Extra Promises
    Make It All Asynchronous
    When a function needs to return a promise, for example, a service that's returning to a controller, but the return value is not guaranteed to be a promise, $q.when can be used to ensure that the return is indeed a promise. • Create a function that needs to return a promise • Use $q.when to guarantee the "thenable" object • Use $q.when to make synchronous processes appear asynchronous
    8:42
    The Pitfall of No Return
    As we will show in an example, not returning any value within a .catch can lead to unexpected behavior. We will see how to handle this correctly. • Create a failing process • Follow a path that does not return any value • Handle the process outcome correctly
    4:19
    Promises Versus Events
    Most older JavaScript libraries deal exclusively in events when handling asynchronous processes. Here, we will compare the pros and cons of each. • Event specificities • Promise specificities • Which one should you choose
    9:26
    Race to the Finish Line
    Given a list of tasks, we need to know as soon as a single one of them is complete Promise.all allowed us to wait for all. Promise.race will allow us to trigger as soon as any of the tasks are complete. • Create a list of promises • Add a .then handler to each of them • Use Promise.race to handle the first task to be completed
    8:33

Skills

  • AngularJS
  • JavaScript

Similar Courses

More Courses by this Instructor