Angular 4: Asynchronous Programming Using toPromise

Jun 21,2017 | Posted by : Michelle Esposito

When dealing with asynchronous programming in http you are bound to come upon this very important topic. It takes an observable and converts it into a promise. Let us take a closer look:

Similar to the concept of Java Future: “In Java a Future represents the result of an asynchronous computation. Methods are provided to check if the computation is complete, to wait for its completion, and to retrieve the result of the computation. The result can only be retrieved using method get when the computation has completed, blocking if necessary until it is ready. Cancellation is performed by the cancel method. Additional methods are provided to determine if the task completed normally or was cancelled. Once a computation has completed, the computation cannot be cancelled. If you would like to use a Future for the sake of cancellability but not provide a usable result, you can declare types of the form Future<?> and return null as a result of the underlying task.”

Therefore, you can create a future and that represents a piece of work that will eventually complete. But asynchronous means that you don’t want to immediately wait for it. You want to move on and do other things. But sometimes you’ll get to a certain point in your logic where you need the results. At that point you’re willing to wait for the result. You can call get to then get it blocking or synchronously. There’s a lot of different variations on how this can work. This is one example for those already familiar with the concept.

This relates to the Javascript Promise:“A promise is an object which can be returned synchronously from an asynchronous function. It will be in one of 3 possible states: Fulfilled: onFulfilled() will be called (e.g., resolve() was called) Rejected: onRejected() will be called (e.g., reject() was called) Pending: not yet fulfilled or rejected.”

To clarify, a promise is used to do asynchronous style programming. It’s an asynchronous pattern. Instead of invoking a function directly and blocking on it and waiting for it to complete and provide the result -- you can use a promise.

It’s an object that encapsulates the function, and it’s put on the shelf until it can get handled at some point. When it does get handled it might take a while to execute and then that promise will then eventually in the future it will contain that result when it has completed.

The idea is that when you work with a promise you don’t call a function directly. Instead you immediately return the promise synchronously. But it doesn’t block you because it’s immediate. Then it’s going to be in one of three possible states: fulfilled, pending or rejected.

Rejected means that it might have run into an error and cannot ever complete. This could be the result of a time out or a bad url that gives you back a 404 as a result of an http error.

When you create an object it’s initially in the pending state. You can go about your business and do other things. But when that does complete, if there were no errors, it becomes in the fulfilled state. Or if there was an error it becomes rejected. A promise can go from pending to fulfilled, or it can go to rejected. It’s impossible for fulfilled to become rejected. It’s impossible for rejected to become fulfilled. 

View our nationwide schedule for Comprehensive Angular 4 training.

angular 4 asynchronous function promise

Views: 4150