Exercise (Video): Fetch Handling Errors

Loading...

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

Front-End Web Development with React

136 calificaciones

The Hong Kong University of Science and Technology

Front-End Web Development with React

136 calificaciones

Curso 2 de 4 en SpecializationFull-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 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 application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

De la lección

More Redux and Client-Server Communication

In this module you will explore Redux further including Redux action, combining reducers, and Redux thunk, client-server communication using Fetch and the REST API. You will get a brief introduction to animation in React. You will also learn about testing, building and deploying React applications.

Exercise (Video): Fetch from Server33:57

Exercise (Video): Fetch Handling Errors15:49

Exercise (Video): Fetch Post Comment18:49

Conoce a los instructores

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

In the previous exercise when we updated

our React application to use Fetch to fetch the data from the server,

we made an implicit assumption that everything will work perfectly.

That is, the communication between

our React application and the server will work perfectly,

and the server is up and running,

and is serving up the data.

But, there is many a slip between the cup and the lip.

So, when your application is communicating with the server,

a lot of things can go wrong along the way.

The client may not be having access to the Internet,

the server may not be up and running.

So, many errors could be encountered.

Now, the previous implementation did not have a way of

handling errors if they occur when you are communicating with the server.

In this exercise, we are going to update our application to handle errors.

Now, the remaining part of displaying

the error messages and so on has already been set up in our application.

So, it's only a matter of handling errors within

our action creators where we issue the Fetch request to the server.

So, that's where we will make modifications to handle

the situation when we encounter errors while communicating with the server.

To get started on this exercise as I mentioned,

the views are all well

updated in order to handle when error messages are delivered there.

So, we have seen how error messages are handled and how they are rendered into views.

But, we haven't updated the place where we are actually accessing the server.

So, here for example,

when we fetched the dishes,

we were optimistically assuming that all the communication with the server is

going to work perfectly and so we never bother about handling errors here.

Now, how do we update this to handle errors?

So, this is where we will go into our code here,

and then I will update this to handle errors.

So, when we encounter an error,

the first thing that they will do here,

is to worry about handling errors.

So, when we receive a response from the servers,

this response could be a response that is sending back the data,

or the response could be an error response from the server.

So, whatever will be the case,

we need to handle that problem here.

So, to handle the problem, we'll say, "Okay,

if you receive the response correctly from the servers,

then what do you do?"

So, we'll say, "If response.ok".

So, the "Ok" property will tell you that the response from

the server was okay and so you can handle things appropriately.

Then in that case,

we'll just return the response.

So, when you return the response, what happens?

This response then will become available to the next "Then".

So, if you know how promises work,

so when this returns something,

that will be delivered in as the incoming parameter to the next

"Then" that has been changed into the set of promise handlers here.

So, then in here,

the corresponding callback function should be able to handle that appropriately.

So, if the response is "Ok",

I'm just going to pass it down here,

and then you're done.

See, the otherwise is where the problem is.

If you encounter errors,

then what do you do?

So, in that case then we'll say,

"Var error is new error".

So, we'll generate a new error object.

So, this is error object that can be generated in JavaScript.

So, we'll generate a new object and then inside this error object,

we can set up a message to be delivered.

So, we'll say, "Error" and

then we'll extract a status from the response.

So, the response's status will contain the status code for the response.

So, the status code like Azure itself;

300, 400, 500 response codes.

"200 Okay" is fine which means that it should have already been handled by that part.

The other ones we will handle here.

The error codes that we'll handle here.

So, we will take the response error code,

and then we'll join that together into a error message here.

So, we'll say, "response status text".

So typically, the status will contain the status code,

and the status text will contain

any error message if the server sent back an error message.

So, that is what we will construct as an error object here,

and after we construct the error object,

then we'll say, "Error.response is response".

And then we will throw the error here.

So, when you throw the error in a promise handler,

we can then implement a catch at the bottom

which will catch the error and then handle the error appropriately.

That I will show you in a minute how we complete.

So, if you receive a response from the server,

then this is how you handle the response from the server.

Now, there could be situations where the server doesn't even respond.

So, in that case,

in a promise handler,

you can also supply an error handler here.

If you have learnt about promises,

you know how the promise handling should be implemented.

So, here we will implement an error handler here.

In the error handler,

we'll say, "Var error message".

We'll say, "New error".

Typically, when an error is encountered when communicating with the server,

that error.message will contain some information about what this error is related to.

So, I'm going to take that part and then generate a new error object,

and then we will throw an error.

So, that's how we will handle errors.

So, the first part is a situation where you receive a response from the server,

but the response could be an error response from the server.

The second part would be a situation where you don't hear back anything from the server,

so that's where you will have to handle the error appropriate.

Now, when you encountered an error what happens?

When you threw an error.

Now, in the handling of promises,

an error will cause a rejected promise.

So, that we will catch using the.catch of the promises.

So, inside the.catch you will receive the error.

And this catch would be caused either because you throw an error here,

or you throw the error here.

In either case, we'll have to handle the error appropriately.

So, then we'll say,

error and build dispatch.

Now, dishesfailed with

the error.message here.

So, that is how we will handle.

We have already implemented the dishesFailed here, the method here.

So that will automatically take care of it.

So, this is where we will dispatch

a dishesFailed action with the error message included in there.

And that when it is received by the dishesFailed will then create this action type,

and then dispatch that.

And then so that will ensure that

your state is updated with the appropriate error message set there.

So, that's the update that we will do to fetch dishes to handle errors.

Now, the same kind of update needs to be done for the comments,

and also the promos here.

In both cases, the way you handle the error is exactly the same.

So, all I need to do is just copy this code from the dishes.

There is nothing specific about dishes in this code.

So, I can just copy that code,

and then go down into that fetchComments here,

and then simply piece that code in here.

And then that'll take care of handling the errors for my fetchComments.

And similarly, I need to piece the same thing also for my promotions there.

And so when I piece that in the promotions,

that will also handle errors that are encountered in the promotions.

In addition, we need to get hold of this catch.

So, copy this catch,

and then we'll paste the catch into the fetchComments.

So, as you can see I am pasting that into the fetchComments here,

and similarly in the fetchPromos.

I will paste that in here.

And of course, after pasting this catch error,

make sure to update this to commentsFailed.

And similarly, this one should be updated to promosFailed here.

And that's about it.

So, your application should now be able to handle errors that

are caused when you are unable to communicate with the server.

Let's save the changes.

Going to our a browser,

application should work exactly the same as before,

should not have any problems at all,

and all the rest should work as we expected.

However, this is now a time for me to introduce an error.

So, what am I going to do?

I'm going to go and then shut down the server,

and see what my application will do when my server is not running.

That's an easy way to generate an error.

Going to the terminal Window,

or the command Window where my json server is running.

I'm going to stop my json server by typing Control+C.

So, now my json server is not running at all.

So, if React client tries to talk to the server,

it will fail to communicate with the server.

Now, let's see how my application will display the error messages.

Going to the browser,

you now see that my browser is displaying the error message as encountered here.

So, ''Failed to fetch'',

''Failed to fetch'' here.

Both of these are displaying the error message as we expected here.

Now, in both the cases,

the failure is because

my react application is not able to reach the server so the error that you

encounter here is caused in our code by this particular error handling part here.

So, where the error message is encountered here.

Now, let's do one minor modification to this,

and then we'll see how the error is going to be displayed.

So, now what I will do is I will restart my server,

but instead of accessing my dishes from dishes,

I'm going to access it at a wrong location.

So, I'm going to update this to dishees rather than dishes.

Of course, obviously I'm causing this mistake

deliberately just to illustrate to you what will happen.

So, once I do that,

let me go back and restart my server.

So, let me restart by Json server here.

So, my server is up and running.

So, my application should work perfectly fine,

and trying to reach the server.

But then when it tries to access localhost:3001/dishees, it is going to fail.

And so let's see how the error message is displayed in that circumstance.

Going to the browser,

let me reload my application.

And then when my application is reloaded,

you see what the error message here says.

It says ''Error 404: Not Found''.

So, you see I deliberately caused a 404 error message here.

And then you will notice that when you go down here,

you will notice this tried to do a get to

localhost 3001 dishees which obviously doesn't exist.

So, that's why it encountered a ''404 Not Found''.

And then so, the dishees failed was called here.

And when the dishes failed is called,

then look at the action here.

So, inside the action,

you'll see the payload here.

It says ''Error 404: Not Found''.

So, that's the error message that was delivered to my redux store.

And that is what was configured in the redux store,

so when I open the next estate in dishes you

see he is loading false the error message is that,

and the dishes is an empty array.

So, that is one more illustration of how your application is able to catch the errors.

With this, we complete this exercise.

This is a good time for you to do a get Comment with the message fetch handling errors.

Now make sure to go back and correct

the dishees back to dishes in the actioncreator.js file.

Otherwise, you will still keep encountering this error again and again.

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