Exercise (Video): Angular HTTP Client: Error Handling

Loading...

Do curso por The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

880 classificações

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

880 classificações

Curso 2 de 5 em Specialization Full 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. 6.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 through the HTTP client and the use of REST API on the server side. 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

Na lição

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 Client10:28

Brief Representational State Transfer (REST)16:20

Exercise (Video): Angular HTTP Client21:11

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

Exercise (Video): Saving Changes to Server12:29

Conheça os instrutores

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

[MUSIC]

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.

When the server generates a response, or the HTTP client,

while communicating with the server, encounters an error and then generates

an error response, this is delivered in the form of HTTP error response.

Now, this response, we want to be able to process it and

then turn that into a response message string, which

can be delivered to the client so that the client can display this on the screen.

So to enable us to do that,

we will create a new service named process HTTP message in this, this is folder.

So to do that, at the prompt type ng,

g service services/ProcessHTTPMsg,

and generate the ProcessHTTPMsg service.

Now, once the service is generated, we will then go ahead and

add it into the app module.

And then we'll add in a method to the ProcessHTTPMsg service.

Now that we have created the ProcessHTTPMsg service,

let's go ahead and then add that into the app.module.ts file.

So going to the app.module.ts file,

let me import the ProcessHTTPMsg service,

From './services/process-httpmsg.service'.

So once that is imported, then we will be able to use that in our application.

So let's go ahead and add that into our providers.

So going into our providers,

let me add in the ProcessHTTPMsgService into the providers.

The first thing that we will do is include a new method into

the ProcessHTTPMsgService called handle errors,

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,

throwError from, rxjs,

and this helps us to throw in error whenever that arises.

And then we import HttpErrorResponse from,

angular/common/http.

Then we will start designing handleError 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 handleError 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.

If error.error is an instance

of ErrorEvent, so if this is an error event that occurs,

then the error.error.message will contain information.

So we'll set the error message to

error.error.message.

If that is not the case, then that means that this is coming from the server side,

and so in that case, the error message is constructed by saying equal to backquotes,

note the backquotes here, and then ${error.status}.

So we are extracting the status information from there.

And then,- error.statusText,

if the statusText exists, or

that'll be an empty string there.

And then we will also include the error.error itself,

the complete error object itself, right there in the string.

And then use that as our error message.

Now, once we have the error message,

then we will be able to use the throwError to

return an error observable to our application.

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.

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

Now, within our services, for example the dishservice.ts file,

we saw that earlier when we said this HTTP get, and then we just said map,

and then assumed that the response is always a positive response.

But suppose their response is not positive, and

then it returns an error, then we need to catch that error.

To help us with this, we import the catchError operator from rxjs,

and then we also import the ProcessHTTPMsgService

that we just created earlier into

our dish service so that we can use the handle error method from there.

So we import this from the ./process-httpmsg.service.

And then, going down to the constructor,

we now inject the process HTTP message service

into the constructor, along with the HTTP client.

So that we can make use of this service,

especially the handle error method of the service to handle the errors

which are returned by our HTTP client there.

Now, once we have configured the constructor,

then to handle error in the getDishes method for

example, we will pipe to catchErrors method.

And then call the handleError method after

this.processHTTPMsgService within the catchError method.

So this way When the HTTP client returns a error then this will be processed and

the appropriate error message will be extracted.

And then it will end up throwing the error through

the handleError method at that point.

Similarly, let's do the same to the getDish and

the getFeatureDish methods also.

Now, when it comes to the getDish ids method,

since the getDish ids method is making use of the getDishes method,.

So we don't need to explicitly call the handleError because if any error arises

the getDishes method will have already converted that error into an error string.

So we just need to catch the error and then return the error from getDish Ids.

Normally, we wouldn't even come up to this point if an error arises, because

the getDishes method would have handled the error appropriately at that point.

So once we have configured the dish service appropriately,

then we will be able to then make use of the catchError

method to deal with the errors that arise.

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

How do we handle this within our component 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 were expecting the dishes to be delivered to us.

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

the error will be delivered by the observable throw and

then 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 specified 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 error function saying,

errMess, which is the value returned in

when the observable throw is done by the dishService.

So in this case, I would say this.errMess = <any>errMess, and that's it.

So here what happens is that when the observable

is returned by the dishService is a Value,

then that would 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 menu components template file, here we see that if dishes is not null,

then we are displaying the menu with all the dishes.

If 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 dive will be displayed in

case there is an errors, and the error message.

ErrMess string is set up to the error message.

So in that case, we'll just simply say h2 error,

and then I'm just going to display that string as,

A string within the view there, that's 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, am 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 will say that this.errMess

= Ermess here.

That's it, so my dish component is now updated.

So I need to update the dish component's 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'll show the spinner if the dish is null.

So let me add in also, 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 detail 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 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're only dealing with 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, I'll say dish errmess string and then go down into the code here.

And in the code here,

we'll simply say errmess.

This dish errmess = any

errmess, that's it.

And similarly, update the home components template files.

And going to the home components template file,

we see that we have the dish bin 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 I update it to dish ErrMess here.

And also, update this to dishErrMess here, that's it.

Let's save the changes.

Going to the browser, you see that everything works just like before.

The home, the menu component and also the dish detail 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 a nonexistent information from the server.

Let me go to the dish service and then cause

my first problem in the dishService here.

So for the featured dish instead of dishes, let me make a mistake and

say dishees and then save the change.

Obviously that means that this url doesn't exist.

So, what will happen if it access the server?

Going to the browser when we now scroll,

you see that the dish is not being displayed here.

It says here 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 work around 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 that's all that we could get trying to access the server in this application.

Same thing, if I go to the menu, you will 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 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 git commit with the message http part two.

[MUSIC]

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play