As you know in recent versions of ECMAScript, javascript received new features that extend asynchronous capabilities of the language.
Most interested features are: Promise, Async Function, Async Iterator
Let’s take a look at all of them, but let’s start from Promise, because it is basis for Async Function and Async iterator. Async Function and Async iterator will be described in next articles.
In browser’s javascript all calls to server are executed in asynchronous mode, before we register callbacks that handle the result of server calls. But when we have several calls to the server that are linked by common logic, we might need to use callback in callbacks and etc. and it can lead to a mess in the code. One of the alternatives to the callback is Promise. Promise allows to add to asynchronous operation as many handlers as we want, also it allows to have one handler for several async operations or execute linked asynchronous operations one by one with using a chain of promises.
In MDN the Promise is described as:
“The Promise object is used for asynchronous computations. A Promise represents a value which may be available now, or in the future, or never.”
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
There are several libs that allow using the Promises in JavaScript.
From ECMAScript 6 the Promises is part of the language specification.
A Promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation.
A Promise can have one of three internal states:
- pending: initial state, not fulfilled or rejected.
- fulfilled: meaning that the operation was completed successfully.
- rejected: meaning that the operation failed.
A Promise that is fulfilled or rejected is called settled.
As for now it is impossible to know the internal state of a Promise from JavaScript,
but it can be viewed in console.log
In modern browser, a Promise is internal javascript object.
A Promise can be created in any place of code in the following way:
Where resolve and reject should be invoked when Promises are successfully fulfilled or rejected because of an error or unexpected behaviour.
For instance:
So the Promise will be successfully fulfilled in 50ms with value success when resolve callback is invoked.
Any time we can subscribe to the promises and receive the result of resolving or rejection by adding a callback in the method then:
Let’s look at the following example:
Promise.resolve — returns a promise that is resolved with the given value, if the value is thanable object, the returned promise will follow thanable and will be fulfilled with value from thanable, otherwise the promise will be fulfilled with the given value.
Promise.reject — return promise that rejects with value
Promise.all — returns a promise that will be fulfilled when all given promises are resolved or rejected at least once.
Promise.race — returns a promise that fulfills or rejects as soon as one of the promises in the iterable fulfills or rejects, with the value or reason from that promise.
Chain of promises:
Promises can be ordered in a chain if callback for the than method returns a promise:
How to use promises now:
Most of the modern browsers support the native Promises. See on Can I Use site
So if you are going to use the Promises for developing a web application only for new browsers you can do it without any problem, however if it is necessary to support some old browsers, use either a library with implementation of Promises, or polyfill. The libraries that implement Promises were provided earlier in the article. There are several polyfills that allow to use Promises if they are native browser objects for instance promise-polyfill. There is also exist polyfill for Babel that can be used in a project where Babel is used.
