Javascript Promises

11 Key excerpts on "Javascript Promises"

• 

  eBook - ePub

  Mastering JavaScript Promises

  • Muzzamil Hussain(Author)
  • 2015(Publication Date)
  • Packt Publishing

    (Publisher)

  promise . If we analyze promise as a pact from human, it will help us understand the concept of promises in computer programming especially from the JavaScript perspective. Every promise is a pact among two or more parties to deliver some value to the other. The value can either be tangible or intangible, but a promise must deliver something in return. Until the promise is fulfilled, it remains in an unfulfilled state. However, when the said commitment has been made, the promise is said to be fulfilled. If the promise is not delivered as anticipated, the promise is said to fail.

  So, what is a promise? According to the official definition: Promise is an object or a function with a then method whose behavior confirms to this specification and represents the eventual result of an asynchronous operation.

  The source of this definition is slide number 21 at http://www.slideshare.net/wookieb/callbacks-promises-generators-asynchronous-javascript .

  Passage contains an image

  Why do we need promise in JS?

  Promises.js is a JavaScript library that promises asynchronous I/O operations such as reading and writing on a file. Whenever there is a callback method that involves making all operations related to I/O, they are to be made asynchronous. This extra callback parameter confuses our idea of what is the input and what will be its return value. It never works with control flow primitives. It also doesn't handle errors thrown by a callback method.

  So, we need to handle errors thrown by a callback method, but also need to be careful not to handle errors thrown by the callback method. By the time we are done with this, our code will be a mess of error handling.

  Despite all this mess of error handling code, we are still left with the problem of the extra callback parameter hanging around. Promises help you naturally handle errors, and write cleaner code by not having callback parameters.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Professional JavaScript for Web Developers

  • Matt Frisbie(Author)
  • 2019(Publication Date)
  • Wrox

    (Publisher)

  It should come as no surprise that this callback strategy does not scale well as code complexity grows. The “callback hell” colloquialism is well-deserved, as JavaScript codebases that were afflicted with such a structure became nearly unmaintainable.

  PROMISES

  A “promise” is a surrogate entity that acts as a stand-in for a result that does not yet exist. The term “promise” was first proposed by Daniel Friedman and David Wise in their 1976 paper, The Impact of Applicative Programming on Multiprocessing, but the conceptual behavior of a promise would not be formalized until a decade later by Barbara Liskov and Liuba Shrira in their 1988 paper, Promises: Linguistic Support for Efficient Asynchronous Procedure Calls in Distributed Systems. Contemporary computer scientists described similar concepts such as an “eventual,” “future,” “delay,” or “deferred”; all of these described in one form or another a programming tool for synchronizing program execution.

  The Promises/A+ Specification

  Early forms of promises appeared in jQuery and Dojo's Deferred API, and in 2010, growing popularity led to the Promises/A specification inside the CommonJS project. Third-party JavaScript promise libraries such as Q and Bluebird continued to gain adoption, yet each implementation was slightly different. To address the rifts in the promise space, in 2012 the Promises/A+ organization forked the CommonJS "Promises/A" proposal and created the eponymous Promises/A+ Promise Specification (https://promisesaplus.com/ ). This specification would eventually govern how promises were implemented in the ECMAScript 6 specification.

  ECMAScript 6 introduced a first-class implementation of a Promises/A+–compliant Promise type. In the time since its introduction, Promises have enjoyed an overwhelmingly robust rate of adoption. All modern browsers fully support the ES6 promise type, and multiple browser APIs such as fetch() and the battery API use it exclusively.

  Promise Basics

  As of ECMAScript 6, Promise is a supported reference type and can be instantiated with the new

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Node.js Design Patterns

  Design and implement production-grade Node.js applications using proven patterns and techniques, 3rd Edition

  • Mario Casciaro, Luciano Mammino(Authors)
  • 2020(Publication Date)
  • Packt Publishing

    (Publisher)

  Promises/A+ .

  Promises represent a big step ahead toward providing a robust alternative to continuation-passing style callbacks for propagating an asynchronous result. As we will see, the use of promises will make all the major asynchronous control flow constructs easier to read, less verbose, and more robust compared to their callback-based alternatives.

  What is a promise?

  A Promise  is an object that embodies the eventual result (or error) of an asynchronous operation. In promises jargon, we say that a Promise is pending  when the asynchronous operation is not yet complete, it's fulfilled  when the operation successfully completes, and rejected  when the operation terminates with an error. Once a Promise is either fulfilled or rejected, it's considered settled .

  To receive the fulfillment value or the error (reason ) associated with the rejection, we can use the then()  method of a Promise instance. The following is its signature:

  promise.then(onFulfilled, onRejected)

  In the preceding signature, onFulfilled  is a callback that will eventually receive the fulfillment value of the Promise , and onRejected  is another callback that will receive the reason for the rejection (if any). Both are optional.

  To have an idea of how promises can transform our code, let's consider the following callback-based code:

  asyncOperation(arg, ( err, result ) => { if (err) { // handle the error } // do stuff with the result })

  Promises allow us to transform this typical continuation-passing style code into a better structured and more elegant code, such as the following:

  asyncOperationPromise(arg) .then(result => { // do stuff with result }, err => { // handle the error })

  In the code above, asyncOperationPromise() is returning a Promise , which we can then use to receive the fulfillment value or the rejection reason of the eventual result of the function. So far, it seems that there is nothing major going on, but one crucial property of the then()  method is that it synchronously returns another Promise

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  The TypeScript Workshop

  A practical guide to confident, effective TypeScript programming

  • Ben Grynhaus, Jordan Hudgens, Rayon Hunte, Matt Morgan, Wekoslav Stefanovski(Authors)
  • 2021(Publication Date)
  • Packt Publishing

    (Publisher)

  catch() methods at any time to obtain the resolved state of the promise. We'll discuss those methods later in this chapter, but it's worth calling out at the beginning here that promises are more than syntactic sugar. They open up entirely new programming paradigms in which event handling logic can be decoupled from the event itself, just by storing the event in a promise.

  Promises are not unique to JavaScript but were first proposed as a computer programming concept in the 1970s. Note

  For more information, refer to Friedman, Daniel; David Wise (1976). The Impact of Applicative Programming on Multiprocessing . International Conference on Parallel Processing. pp. 263–272.

  As web frameworks gained popularity, proposals for promises started to appear in 2009 and libraries such as jQuery started implementing promise-like objects in 2011. Note

  For more information, refer to the following: https://groups.google.com/g/commonjs/c/6T9z75fohDk and https://api.jquery.com/category/version/1.5/

  It wasn't long before Node.js started to have some promise libraries as well. Google's AngularJS bundled the Q library. All of these libraries wrapped callbacks in a higher-level API that appealed to developers and helped them to write cleaner and more readable code.

  In 2012, promises were proposed as an official specification in order to standardize the API. The specification was accepted in 2015 and has since been implemented in all major browsers as well as Node.js.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  JavaScript Concurrency

  • Adam Boduch(Author)
  • 2015(Publication Date)
  • Packt Publishing

    (Publisher)

  In the next chapter, we'll look at a new way of thinking about synchronization using promises. This will allow us to start designing and building concurrent JavaScript applications in earnest. Passage contains an image

  Chapter 3. Synchronizing with Promises

  Implementations of promises have existed for many years inside JavaScript libraries. It all started with the Promises/A+ specification. Libraries implemented their own variations of this specification, and it wasn't until recently (ES6 to be exact) that the Promise specification made it into the JavaScript language. They do what the chapter title suggests—help us apply the synchronization principle.

  In this chapter, we'll start of with a gentle introduction to the various terms used in promise-speak so that the remainder of the chapter will be a little easier to follow. Then, well go through the various ways that promises are used to resolve future values and make our lives easier when we deal with concurrency. Ready?

  Promise terminology

  Before we dive right into the code examples, let's take a minute to make sure we have a firm grasp on the terminology surrounding promises. There are promise instances, but then there are also various states and actions to consider. The sections that follow will make much more sense if we can nail down the promise lexicon. These explanations are short and sweet, so if you've already used promises, you can quickly gloss over these definitions to sanity check your knowledge.

  Promise

  As the name suggests, a promise is, well, a promise. Think of a promise as a proxy for a value that doesn't exist yet. The promise let's us write better concurrent code because we know that the value will be there at some point, and we don't have to write lots of state-checking boilerplate code.

  State

  Promises are always in one of three states:

  • Pending

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Learning Node.js Development

  • Andrew Mead(Author)
  • 2018(Publication Date)
  • Packt Publishing

    (Publisher)

  Promises in Asynchronous Programming

  In the previous two chapters, we looked at many important concepts of asynchronous programming in Node. This chapter is about promises. Promises are available in JavaScript since ES6. Although they have been around in third-party libraries for quite some time, they finally made their way into the core JavaScript language, which is great because they're a really fantastic feature.

  In this chapter, we'll learn about how promises work, we'll start to understand exactly why they're useful, and why they've even come to exist inside JavaScript. We'll take a look at a library called axios that supports promises. This will let us simplify our code, creating our promise calls easily. We'll actually rebuild an entire weather app in the last section.

  Specifically, we'll look into following topics:

  • Introduction to ES6 promises
  • Advanced promises
  • Weather app with promises

  Passage contains an image

  Introduction to ES6 promises

  Promises aim to solve a lot of the problems that come up when we have a lot of asynchronous code in our application. They make it a lot easier to manage our asynchronous computations—things such as requesting data from a database. Alternatively, in the case of a weather app, things such as fetching data from a URL.

  In the app.js file we do a similar thing using callbacks:

  const yargs = require('yargs');const geocode = require('./geocode/geocode');const weather = require('./weather/weather');const argv = yargs .options({ a: { demand: true, alias: 'address', describe: 'Address to fetch weather for', string: true } }) .help() .alias('help', 'h') .argv;geocode.geocodeAddress(argv.address, (errorMessage, results) => { if (errorMessage) { console.log(errorMessage); } else { console.log(results.address); weather.getWeather(results.latitude, results.longitude, (errorMessage, weatherResults) => { if (errorMessage) { console.log(errorMessage); } else { console.log(`It's currently ${weatherResults.temperature}. It feels like ${weatherResults.apparentTemperature}.`); } }); }});

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Learn ECMAScript

  • Narayan Prusty, MEHUL MOHAN(Authors)
  • 2018(Publication Date)
  • Packt Publishing

    (Publisher)

  Promise pattern. This new pattern removes the common code issues that the event and callback pattern had. It also makes the code look more like synchronous code. A promise (or a Promise object) represents an asynchronous operation. Existing asynchronous JavaScript APIs are usually wrapped with promises, and the new JavaScript APIs are purely implemented using promises. Promises are new in JavaScript but are already present in many other programming languages. Programming languages, such as C# 5, C++ 11, Swift, Scala, and more are some examples that support promises. Let's see how to use promises.

  Passage contains an image

  Promise states

  A promise is always in one of these states:

  • Fulfilled: If the resolve callback is invoked with a non-promise object as the argument or no argument, then we say that the promise is fulfilled
  • Rejected: If the rejecting callback is invoked or an exception occurs in the executor scope, then we say that the promise is rejected
  • Pending: If the resolve or reject callback is yet to be invoked, then we say that the promise is pending
  • Settled: A promise is said to be settled if it's either fulfilled or rejected, but not pending

  Once a promise is fulfilled or rejected, it cannot be transitioned back. An attempt to  transition it will have no effect.

  Passage contains an image

  Promises versus callbacks

  Suppose you wanted to perform three AJAX requests one after another. Here's a dummy implementation of that in callback-style:

  ajaxCall('http://example.com/page1', response1 => { ajaxCall('http://example.com/page2'+response1, response2 => { ajaxCall('http://example.com/page3'+response2, response3 => { console.log(response3) } })})

  You can see how quickly you can enter into something known as callback-hell

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  JavaScript

  The New Toys

  • T. J. Crowder(Author)
  • 2020(Publication Date)
  • Wrox

    (Publisher)

  8 Promises

  WHAT'S IN THIS CHAPTER?

  • Creating and using promises
  • “Promises” and “thenables”
  • Promise patterns
  • Promise anti-patterns

  CODE DOWNLOADS FOR THIS CHAPTER

  You can download the code for this chapter at https://thenewtoys.dev/bookcode or https://www.wiley.com/go/javascript-newtoys .

  In this chapter you'll learn about ES2015's promises, which simplify and standardize the handling of one-off asynchronous operations, reducing “callback hell” (and paving the way for ES2018's async functions, covered in Chapter 9 ). A promise is an object representing an asynchronous result (like an HTTP request completing or a one-off timer firing). You use a promise to observe the result of an asynchronous process, and/or give the promise to other code so that other code can observe that result. Promises are JavaScript's version of a pattern variously called promises, futures, or deferreds. They draw heavily on prior art, in particular the Promises/A+ specification1 and the work leading up to it.

  Before we get started: You may have heard that promises are obsolete, because ES2018 added async functions (Chapter 9 ). That's mostly incorrect. It's true that you'll interact with promises differently when using async functions, but you'll still be interacting with them, and you'll still need to have a solid idea how they work. Also, there are times you'll use promises directly, even in an async function.

  WHY PROMISES?

  A promise doesn't do anything of its own, it's just a way to observe the result of something asynchronous. Promises don't make operations asynchronous. They just provide a means of observing the completion of operations that are already

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Mastering TypeScript

  Build enterprise-ready, modular web applications using TypeScript 4 and modern frameworks, 4th Edition

  • Nathan Rozentals(Author)
  • 2021(Publication Date)
  • Packt Publishing

    (Publisher)

  This concludes our exploration of Promises, what they are, and how they can be written. As we have seen, Promises follow a simple but strict syntax, and will only ever return a successful result, or a failure condition. This structure allows us to use Promises in a uniform manner, and we can use fluent syntax to chain multiple Promises together to execute them in sequence, if we so desire.

  Using Promises gives us a tool to write code that is easier to follow, and has a cleaner syntax. There is also, however, another benefit to using Promises, in that we can actually pause execution of our code until a Promise completes, using the async and await syntax, which we will explore next.

  Async and await

  We have seen that the JavaScript runtime is single threaded and will push any asynchronous calls onto a particular queue within its memory, to be executed later. Using Promises helps us to structure our code to ensure that we only execute a particular section of code once the asynchronous call has completed. We still need to bear in mind, however, that the JavaScript runtime will continue to process our code line by line. This quirk of the language can often lead to weird results, or unwanted errors, if we do not take care when writing code that will be executed asynchronously.

  Oftentimes, however, we need to make a series of calls to one asynchronous function after another. In these cases, it would actually be far better if we could pause the execution of our code until the asynchronous code completes. This is what the async and await keywords can do for us. In this section of the chapter, we will explore how to mark functions with the async keyword, in order to allow the use of the await keyword, which will actually pause execution of the code block until the Promise has completed.

  The async and await language features of JavaScript were adopted in the ES2017 language specification, meaning that only JavaScript runtimes that support this version can use the new async and await keywords. TypeScript, however, has incorporated support for these features for ES target versions all the way back to ES3. This means that we can safely use async and await within any body of TypeScript code, and it will behave as if the runtime was running ES2017. We can start using these language features now, and TypeScript will take care of the rest.

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  JavaScript Application Design

  A Build First Approach

  • Nicolas Bevacqua(Author)
  • 2015(Publication Date)
  • Manning

    (Publisher)

  6.3. Making Promises

  Promises are an up-and-coming standard, and are in fact part of the official ECMAScript 6 draft specification. Currently you can use Promises by including a library, such as Q, RSVP.js, or when. You could also use Promises by adding the ES6 Promises polyfill.

  [3 ]

  A polyfill is a piece of code that enables technology that you’d expect the language runtime to provide natively. In this case, a polyfill for Promises would provide Promises, as they’re natively supposed to work in ES6, made available to previous implementations of the ES standard.

  3 Find the ES6 Promises polyfill at http://bevacqua.io/bf/promises .

  In this section, I’ll describe Promises per ES6, which you can use today, provided you include the polyfill. The syntax varies slightly if you’re using something other than the polyfill for Promises, but these variations are subtle enough, and the core concepts remain the same.

  6.3.1. Promise fundamentals

  Creating a Promise involves a callback function that takes fulfill and reject functions as its arguments. Calling fulfill will change the state of the Promise to fulfilled; you’ll see what that means in a minute. Calling reject will change the state to rejected. The following code is a brief and self-explaining Promise declaration where your Promise will be fulfilled half of the time and rejected the other half:

  var promise = new Promise(function logic (fulfill, reject) { if (Math.random() < 0.5) { fulfill('Good enough.'); } else { reject(new Error('Dice roll failed!')); } });

  As you might’ve noticed, Promises don’t have any inherent properties that make them exclusively asynchronous, and you can also use them for synchronous operations. This comes in handy when mixing synchronous and asynchronous code, because Promises don’t care about that. Promises start out in pending, and once they fail or succeed, they’re resolved and can’t change state anymore. Promises can be in one of three mutually exclusive states:

  Sign up to read

  Learn more about book
• 

  eBook - ePub

  Advanced JavaScript

  Speed up web development with the powerful features and benefits of JavaScript

  • Zachary Shute(Author)
  • 2019(Publication Date)
  • Packt Publishing

    (Publisher)

  promise is an object that wraps an asynchronous operation and notifies the program when the asynchronous operation completes. The promise object represents the eventual completion or failure of the wrapped operation. A promise is a proxy for a value not necessarily known. Instead of providing the value immediately, like a synchronous program, it promises to provide a value at some point in the future. Promises allow you to associate success and error handlers with an asynchronous action. These handlers are called at the completion or failure of the wrapped asynchronous process.

  Promises States

  Every promise has a state. A promise can only succeed with a value or fail with an error once. The state of a promise defines where the promise is in its work towards the resolution of a value.

  A promise comes in three states: pending , fulfilled , or rejected . A promise starts in the pending state. This means that the async operation being done inside the promise is not complete. Once the asynchronous operation completes, the promise is considered settled and will enter either the fulfilled or rejected state.

  When a promise enters the fulfilled state, it means that the async operation has completed without an error. The promise is fulfilled and a value is available. The value generated by the async operation has been returned and can be used.

  When a promise enters the rejected state, it means that the async operation has completed with an error. When a promise is rejected, no future work will be done and no value will be provided. The error from the asynchronous operation has been returned and can be referenced from the promise object.

  Resolving or Rejecting a Promise

  A promise is created by instantiating a new object of the Promise class. The promise constructor accepts a single argument, a function. This function must have two arguments: resolve and reject

  Sign up to read

  Learn more about book