JavaScript Promises

• A tool for delaying the execution of code

• Promises have a .then() property

• Code you put inside .then() executes later

• A promise is a type of value JavaScript functions can return

• Meant to be asynchronous

• Promises have a .then() method (important!)

• Method passed to .then() is invoked when function is complete

• Like a callback

• JavaScript not designed with any wait keyword that pauses execution

• await added in later versions, after promises

• Async values need to be passed to callback functions instead of returned

• Passing callbacks to functions has a few main problems:

• If the callback has to do something asynchronous, you must go one layer deeper into nested callback functions

• Before promises were an official part of JavaScript, they were a developing standard

• Standard that everyone eventually agreed upon known as A-Plus

• https://promisesaplus.com/

• As the promise spec was still being developed, various libraries (jQuery, etc.) included various implementations of the spec

• Generally, the .then() functionality was always included but various other features (error handling, etc.) would not be there or function differently from library to library

• Though there is now one official standard, millions of applications exist which use these provisional implementations or create their own variations on purpose

• Modern versions of JavaScript include a built-in promise definition

• It’s not necessarily the best but because it’s now included in basic JavaScript, will probably become the only standard

• We will be using this Promise version in several demos (see next chapter)

• Make code more readable and easy to maintain

• Can make code easier to troubleshoot if used correctly

• See async functions

• There is often no choice

• Application you must maintain or library you must use already has promises everywhere

• A promise is a value that can be returned by any function

• That value has the following methods...

  • then()

  • catch()

  • finally()

• Promises sometimes have the following methods...

  • when()

  • done()

• Promises can be used wherever a callback would be

• Promise is created within the function body and returned

  • .resolve() method is called at some point (usually from another closure)

• Call built-in JavaScript method fetch to get a promise

• Add handler to promise resolution using .then()

• When a function returns a promise, the value must be accessed using the .then() method

  • This quality is also known as being thenable

• Functions which return promises can also be invoked after calling the yield or await keywords

• yield and await are used in special functions called generators and async functions, respectively

• Both pause code execution on the current line until the promise resolves

• JavaScript has a built in Promise class (recent)

  • then() method

  • catch() method

• Creating our own implementation of promises is very useful for learning

• Use built-in or 3rd party promise class for production apps

• Async functions are special JavaScript functions

• Added very recently

• Can delay code execution

• Async functions use promises as a requirement

• Promises go after keyword await

• Code resumes when promise resolves

• Async functions also return promises

• Create an async function

• Create a promise which resolves or throws an error after a given time

• Await the promise in our async function

• Is the code clear?

• How do we access the return value?

• Few applications are complete after just one asynchronous action

• Async actions are often accompanied by yet more async actions

• Numerous scenarios exist for multiple async actions

  • Invoked one after the other, with the subsequent requests depending on data from previous requests

  • Invoked at the same time, wait for all the results before proceeding

  • Invoked at the same time, wait for any result before proceeding

  • Hundreds of others

• Promises can return other promises

• In this case, .then() can be placed on the following line

  • Solves the problem of ever deepening scope created by callbacks

  • Has own problems – e.g., fiendish difficulty of handling errors

• Create a thenable method

  • waitOneSecond() will do

• Have the value returned be a promise

• Have the caller return a promise

• Etc.

• See the different ways we can structure the above code

• Which is clearer?

• Which saves time? Which saves space?

• Common scenarios usually have utilities ready to handle them

  • Waiting until every promise has resolved

  • Only being interested in the first promise to resolve

  • Promise utilities are methods that handle such cases

• Usually take a collection of promises as an argument

Race

• Creates a new, single promise from one or more component promises

• The new promise resolve when the first promise that it’s made up of, whichever one that is, resolves

• Later values are ignored

• Works if fulfilled or rejected

Any

• Similar to Race

• Composite promise resolves when either:

  • Any of the component promises resolves, or

  • All of the component promises is rejected

All

• Creates a new, single promise from one or more component promises

• New promise resolves only after every component resolves

• All return values are available as an array

• If one component promise does not resolve, the All-Promise won’t resolve

• Create several promises

• Have promises resolve / reject at different times

• Have promises return distinct value

• Combine promises with promise utilities

• Notice which one(s) resolve and when

• Identify advantages and disadvantages of using these utilities

• Should the promise invoke reject or should it throw an error?

• What happens when a promise invoked by another promise errors? Does the caller error too?

• What does the call stack look like when investigating the error?

• Create a promise which throws an error

• Investigate the different means of catching the error

• Attempt to call that promise from within another promise

• What does the stack trace look like?

• Promises delay the
  execution of code

• Promises have a
  .then() method

• There are many implementations but a standard one is built into JavaScript

• Encountering a non-standard variation is very possible in real-world

• Promises can return other promises

• Called “chaining”

• Promises can be combined

• Many become a single promise

• Utilities such as any or all

• Promises can be rejected

• Catching errors internally and calling reject allows us to handle errors outside the promise