Exercise (Video): Angular HTTP Client: Error Handling

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

534 calificaciones

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

534 calificaciones

Curso 2 de 5 en SpecializationFull Stack Web and Multiplatform Mobile App Development

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 4.x). This course will use Typescript for developing Angular application. Typescript features will be introduced in the context of Angular as part of the exercises. You will also get an introduction to the use of Angular Material and Angular Flex-Layout for responsive UI design. You will be introduced to various aspects of Angular including components, directives and services. You will learn about data binding, Angular router and its use for developing single-page applications. You will also learn about designing both template-driven forms and reactive forms. A quick introduction to Observables, reactive programming and RxJS in the context of Angular is included. You will then learn about Angular support for client-server communication and the use of REST API on the server side. You will use Restangular for communicating with a server supporting the REST API. A quick tour through Angular animation support and Angular testing rounds off the course. You must have either completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of front end web-UI frameworks to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript frameworks and the Angular framework - Be able to implement single page applications in Angular - Be able to use various Angular features including directives, components and services - Be able to implement a functional front-end web application using Angular - Be able to use Angular Material and Angular Flex-Layout for designing responsive Angular applications - Be able to use Observables and RxJS in the context of Angular applications

De la lección

Client-Server Communication

In this module you will explore client-server communication using both Angular HTTP module and the REST API. You will get a brief introduction to animation support in Angular and create a custom attribute directive. You will also learn about testing, building and deploying Angular applications.

Angular HTTP Client9:31

Exercise (Video): Angular HTTP Client32:08

Exercise (Video): Angular HTTP Client: Error Handling20:37

Conoce a los instructores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Communication between client and server is never a done deal.

To paraphrase a famous proverb,

"there is many a quiver between the client and the server."

So, how do we deal with errors when they arise,

when we are communicating between the client and the server?

Let's talk about that in this exercise.

The first thing that we will do is include

a new method into the process HTTP message service called as,

"handle error" which will take care of handling errors when they arise.

And then we will make use of them in the services where we access the server.

To get started, let's first import rxjs, add, observable, throw.

And this helps us to throw an error whenever that arises.

Now, once we include that, then we will start designing.

Our handle error method and this takes as a parameter an

error which could be a response which is

an error response from the server or any other reason that the error arises.

So, within this handle error method,

what are we supposed to do?

Let's try to construct a message that summarizes what the error is all about.

So, we will include a new string variable here.

And then say, if error is an instance.

Of... So, if the error is from the server side and is indicated in the response,

then we deal with it in one way.

Otherwise, we'll deal with it in a different way.

So, if the error arises because the server side indicates an error,

then, of course, we need to get hold of the body of the message.

So we take the error and then convert that into a Json string.

Or if nothing exists, then we'll start with an empty string,

and then we'll try to extract the error information from the body of the message.

So this is typically contained in the body of the message,

or we will convert that Json into the body into a Json's string directly.

And then finally we'll construct the error message string

as note the use of back quotes here.

This is not forward core, this is backwards.

This is essential because we will be

including some information that

is extracted from the error string where.

And then it says, error status,

error status text.

If that doesn't exist,

then an empty string.

So note, what this means is that

inside this string we can now use variables like these say, dollar error status.

So the status gives you whatever is the response status value,

if it is indicating the response code coming from the server side.

So, anything other than 200,

200s, or 300s, will indicates that there is some error.

Typically, the 400s and 500s indicate error values.

So that is one part, and then if the error itself contains some statistics,

we'll extract that.

And then also add in the error

that we just constructed earlier in the previous line here.

We extracted the error here.

And then use that to construct the message for us.

If that is not the case,

then we'll construct the error message as the error value.

If it contains a message,

then we'll take the error message,

or we'll convert the error itself to

a string values so that that can be used directly within the code.

So, this is how we would construct the error message in that case.

And then, they we will return this as an observable.

But with the throw method.

So with throw we can include the error message.

So what this means is.

This is throwing an error at this point with the error message included there.

So this error message string is constructed

based upon the information that we obtain here.

Either because the server side responded

with an error or the error could be from other reasons.

So, in either case, we will construct an error message and then return it.

Minor error here, but back code should also include the error there.

So there we go.

Now, where do we make use of this handle error?

Now, within our services, for example,

the dish.service.ts file - we saw that earlier when we said this is HTTP get,

and then we just said map and then

assumed that the response is always a positive response.

But suppose the response is not positive and then it returns an error,

then we need to catch that error.

So this is where we will take the help of a method called catch.

So the catch method will be chained in there.

And the way we'll catch the error is that if the error occurs,

you will get an error value there.

And then we will pass that into

the Handle error method

that we just implemented inside the process message service.

So we will pass in the error value into the handle message service there.

That is it.

So this is how you can catch errors if they occur.

So, together with a map we are adding in one more here,

the catch method here.

Same thing. We'll apply to the remaining method steps,

so even for the 'getDish' I'm going to include the same catch method there.

Same thing for that getFeaturedDish,

and for the getDishIds.

We'll just catch and

return the error there.

We don't have anything better to do for this particular case,

we'll just return the error directly.

Normally, we don't expect this to happen because if there was

an error that would have been caught by the getDishes method already.

And so, we won't deal with it and when the when the getDishes method is executed,

then that will return an observable throw,

and we just return that also through the catch here.

So, this suffices for handling errors within our dish service.

Now that we have updated our service to be able to deal with errors,

how do we handle this within our components themselves?

So within a component, so for example,

when we go to the menu component what we realize is that when we do the subscribe,

we would expecting the dishes to be delivered to us.

Now, it is possible that the instead of the dishes,

the error will be delivered by the observable throw,

and that results in the error message being available to us.

So, to deal with that situation,

I will introduce a new variable called,

errmess in the menu component which is of type string.

And then the subscribe method itself provides a way of handling errors.

So, the subscribe method right now we have only specify one function here.

We can also specify a second function which will be called when the error results.

So, in this case I can supply a second arrow function saying, errmess,

which is the value return in when the observable throw is done by the dish service.

So in this case I would say this errmess is equal

to any errmess,

and that's it.

So, here what happens is that when the

observable that is returned by the dish service is a value,

then that will be handled by the first part.

If the observable is returned with the observable throw,

then this function will be executed.

And in this function we are taking the error message and then

capturing that error message into this errmess string that we have here.

So now we have the error message available to us so we can display

this error message on the view of this menu component.

So, how do we display this in the menu components view?

So, going to the menu components template file,

here we see that if dishes is not null,

then we are displaying the menu with all the dishes.

If the dishes is null,

then this spinner is being displayed there.

Now, we will add in one more here.

Even if the errmess that we have the variable is not null,

then also the spinner should be hidden.

And then, finally add in one more div with an ngIf.

So what this does is that this last div will be

displayed in case there is an error and the error message,

errmess string, is set up to the error message.

So in that case will just simply say h2 error,

and then I'm just going to display that string

as a string within the view there.

That is it.

You can do a more elaborate way of displaying the error message if you so wish to,

but all that I'm going to do is if there is an error,

I will simply show error on the screen and then display an errmess.

You can even style it by changing the color to red,

and so on, but I'll just leave it like that there.

So, with this we will end up displaying the error message in the view here.

The same procedure can also be used with the dish component,

and also the home component where we are accessing the dish service.

So, going to the dish component I'm going to do exactly the same thing.

So, within the dish component,

I will include the errmess here.

And then right here within the subscribe,

this is where we are receiving the dish value.

So, the first part what we have already included will be

called if the observable returns a value.

But should it not return a value,

then we need to deal with the error message and we'll use

exactly the same error message function

that we have defined earlier in the menu component.

So, we'll say, this errmess is equal to errmess here, that's it.

So, my dish component is

now updated so I need to update the dish components template file.

So, going to the template file we see that we are going to be displaying the dish If

Dish is not null and then down below here,

we are handling the situation where we are sure the spinner if the dish is null.

So, let me add in also...

So if the error message is not null,

then I should be displaying error message rather than the dish here.

Right? So, let me go ahead and copy

the code from the menu component.

I'm going to use exactly the same code for the dish detailed

components template file also.

So right there.

Let me go ahead and insert that code here.

So we see that if errmess is not null,

then this error will be displayed in the view there.

Now, same thing going to the home component,

we need to go through the same procedure.

Now, within the home component, of course,

we have the dish promotion and leader.

So I'm going to define separate strings for each

one of them because the error could arise from any one of the three.

Right now we are only dealing with the dish being fetched from the server side.

The remaining two, I will expect you to do that as part of the final assignment.

So, we'll say dish errmess string.

And then go down into the code here.

And then in the code here we will simply say errmess,

this dish errmess equal to any errmess.

That's it.

And similarly update the home components template file.

Going to the home components template file,

we see that we have this being the dish being displayed there.

So now, for this one, I should say,

or dish errmess and then down below here I

will include the code that I have copied from

the menu component and then update this to dish errmess here.

And also update this to dish errmess here.

That's it.

Let's save the changes.

Going to the browser,

you'll see that everything works just like before.

The home, the menu component,

and also the dishdetail component without any problem.

Now, the question is, how do we cause errors?

To cause errors one possible way that we can deal with the issue is we

go and seek nonexistent information from the server.

Let me go to the dish service and then cause my first problem in the dish service here.

So, for the feature dish instead of dishes,

let me make a mistake and see dishees and then save the change.

Obviously, that means is that this URL doesn't exist.

So, what will happen if it accesses the server?

Going to the browser.

When we now scroll,

you'll see that the dish is not being displayed here,

'it says error 404 not found'.

This is because we are trying to access

the dish information at the URL dishees which doesn't exist on the server side.

So, you see how the error message is being displayed here.

Of course, you can be a bit more fancy and do more

workaround this and then display the error message in a more meaningful way.

But the basic principle is highlighted here saying that you can show an error message if

something is not properly

executed when you are trying to access information from your server side.

Of course, so this is an artificially created error

in my application to cause yet another kind of error.

I have gone to my terminal window and then shut down

the server to see what my angular application will do in this case.

So, after shutting down the server,

let's see what the home component will display in its view.

So going to the home component,

we now see that because my angular application is not able to access the server,

it has caused an error again,

and then it shows this string there to indicate that some error has occurred.

Of course, this is a cryptic string,

doesn't convey anything meaningful about what the source of the error is.

But what's all that we could get from trying to access the server in this application.

Same thing, if I go to the menu you would see

the same kind of thing being displayed because the server is not available,

and so the dish information cannot be fetched from the server.

With this, we'll complete this exercise.

In this exercise we have learned how to deal with errors that arise during

client server communication in our angular application.

This is a good time for you to do a good comment with the message HTTP part 2.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play