Promises in angular 2 example Video Lecture | Angular 2 tutorial - Front-End Programming

this is part 38 of angular 2 tutorial in
this video we'll discuss using promises
instead of observables in angular 2 in
angular we can use a the promises or
observables the angular built-in HTTP
service by default returns an observer
has actually proved this let's flip over
to visual studio this is the employee
service that we have built in one of our
previous video series and notice here we
have a method get employee buy code so
we provided an employee code and this
method is going to return that specific
employee and to make a call to a web
server we are using the built-in angular
HTTP service and here we using the cap
method to issue a get request and look
at what does get method returns from the
Intelligence it returns an observable
let's actually go to its definition and
then if we look at the return type of
this method look at that it's observable
so by default the angular built-in HTTP
service returns an observable
now for us to be able to use promises
instead of observables we will have to
modify this get employee by code method
to return a promise instead of an
observable the changes that we have to
do are pretty straightforward the first
step is to import the two promised rxjs
operator and this is very similar to how
we have imported the other rxjs
operators like map catch throw etc now
once we have the two promise operator
imported we then change the return type
of this method at the moment of a get
employee by code method is returning an
observable of high employee but we now
want this method to return a promise of
I employee so we change the return type
of the method from observable of high
employee to promise of AI employee and
then we use the to promise operator that
we have imported to transform the
observable to a promise and then the de
catch operator here we use a different
error handling function and there is a
specific reason for that we'll discuss
that in just a bit now let's change this
get employee by code meth
to return a promise instead of an
observable
so first let's import to promise rxjs
operator and then let's change the
return type of this method from
observable to a promise and notice when
we do this this actually is going to
show some red squiggly lines here that's
because we said the return type of this
method is a promise but we know this ket
method is going to return an absorber so
what we are returning from this method
does not match with the return type that
we have specified so we will have to
convert this absorb all that this ket
method is returning to a promise and to
do that we're going to make use of this
to promise operator that we have
imported so let's use the to promise
operator and now these red squiggly
should go away there we go so we said
the return type is promise and this
operator is going to convert the
observable to a promise and we're going
to return that finally we have to deal
with the errors that occur at the moment
we have this error handling function
right here handle error and if you look
at what we are doing here and we are
logging the error to the console and
then we are throwing that error back so
we can handle that error within the
client code where we are consuming this
service and then display meaningful
message to the end-user but here we are
using the true method of the absorber
and if you look at the true method of
the absorber it's actually returning an
error absorber but right here we're
dealing with a promise so we don't have
to use the throw method of the absorber
so let's make a copy of this function
and I'm actually going to change the
name of this too and our promised error
you can give it any meaningful name you
want and since here we're dealing with
the promise we don't have to use the
observable so I'm going to get rid of
that and we're just going to use throw
to throw that error back so we can
handle that error within the client code
where we are consuming this service
method now to the catch method here
let's pass our new method
handle promised error so these are all
the changes required within our employee
service to return a promise instead of
an observable
now let's look at the changes required
but in the client code that is within
our employee component where we are
consuming this employee service notice
here a calling get employee bytecode
method of the employee service this
method was returning an absorber but now
we have changed it to return a promise
with an observable we use the SUBSCRIBE
method to subscribe to the observer but
now this method is returning a promise
so instead of using subscribe we use
then method that is the only change that
we have to do within our employee
component where we are consuming this
get employee by code method that returns
a promise instead of an observable here
is of our employee component where we
are consuming get employee by code
method of the employee service notice
here we already have a red squiggly and
when I hover the mouse over look at what
it says property subscribe does not
exist on type promise of employee now we
know this cat employee by code is
returning a promise and not an
observable so we can't use the SUBSCRIBE
method instead we use then method and if
you look at this den method it has got
two parameters let me actually
right-click on that and go to the
definition here is the first parameter
the first parameter is the callback
function to notify when the promise is
fulfilled meaning when the request is
completed successfully
what is the callback function to call
that's what we specify as the first
parameter and the second parameter is
right here when the promise is rejected
what is the callback function to notify
and we are passing both those callback
functions as parameters to this then
method here is our first callback
function the success callback function
and here is our error callback function
now this is one way of doing this there
is another way as well instead of
passing both the success and error
callback functions to then method like
this we can use the catch method instead
so I'm going to cut this error callback
function from here so I am going to
specify only success callback function
- then method and then here is where we
are closing that then method so here I'm
going to use catch method and to this
I'm going to pass our error callback
function so if you look at this catch
method and if we go to the definition on
Durst this catch method has got only one
parameter they call back function to
notify when the promise is rejected that
is if there is an error processing the
request what is the error callback
function to call and we are passing that
right here to the catch method so let's
save all these changes and reload this
webpage notice here we are requesting
for an employee whose employee code is
EMP one zero three and we see that
specific employee right here now if we
request for an employee whose employee
code does not exist then we expect to
see this message employee with the
specified employee code does not exist
so when we issue a request for employee
with the EMP 1:09 notice we see that
message employee with the specified
employee code does not exist on the
other hand if there is an error
processing the request then we want to
see this message problem the service
please try again after some time so this
is the error callback function if there
is any error processing the request we
expect to see that message and to raise
an error what I'm going to do is
introduce an extra s here within the
service URL so we get an exception now
with these changes let's reload this web
page one more time and now we see that
message problem the service please try
again after some time so all of our use
cases are working exactly the same way
as before now we are using a promise
instead of an observable so using a
promise we are able to do all that and
observable can do so the question that
comes to mind is what is the difference
between a promise and an observable
there are several differences we'll
discuss those differences in detail in
our next video thank you for listening
and have a great day