Handle errors using try or catch and using async await.
- [Instructor] As we saw earlier, when the server went down and we tried to POST a new message, it was not displayed in our message list, but we never received any sort of notification or warning. And so a user might not know what's happening or why it's failing. Let's fix this by catching any errors and displaying something more user-friendly. Let's go back to Visual Studio Code, and let's open up webservice. Inside our getMessages in our webservice, let's add a try-catch statement. I'll use an editor shortcut by typing try, and then selecting try-catch from the list which will create a template for me.
I can then move everything that I'd like to try which are the last two lines, 21 and 22, into the tri-block. And then inside the catch block, I'll add a user-friendly console error. We also have to stop the server, we also have to stop the servers so let's go to our terminal by going to view, integrated terminal, and then pressing CTRL+C to terminate node1.
Then I'll just press Y for yes and now let's go back to our web app and refresh the page. As we can see, we're getting our console error of "Unable to get messages". Next, let's use Angular Material to make a notification that will tell us the error without having to look at our console. Inside our webservice, let's import MdSnackbar. And we'll import that from Angular Material, and then let's inject that into the constructor.
Now, inside our catch let's call this. sb .open, and we can use the same message, and we'll make sure there's a close button and that it will automatically close after a duration of 2000 milliseconds, or 2 seconds.
Let's give this a try. Make sure your server is still turned off for this. And let's refresh. As you can see, we are getting the notification. And after 2 seconds it disappears. If we try that again, and I hit the close button, it'll disappear. Next, let's quickly update the POST update method with a try-catch as well. Since we nearly duplicate code for our error handling, let's create an error-handling function.
So let's go back into Visual Studio Code and at the bottom we'll create our error-handling function. I'll make that a private, since only this class will need access to it. And we'll take the two lines from inside our catch on line 21 and 22 and move them inside our error handler. Then inside our catch we will call this.handleError. And what I'll do next is take the message, which is duplicated between the console error and the SnackBar, and I'll pass it into handleError.
Now instead of displaying that hardcoded message, we'll display the error we pass in. And that should do it. Let's also add a try-catch to our POST message. And I'll copy and paste the handle error call, and instead of GET messages I'll type in POST messages, and remove the plural.
Let's give that a try. We can see the GET messages error, and we'll try POST as well. As we can see, it's working for both GET and POST. An important note is that try-catch statements in this format only work for async/await functions. If we tried this with a promise or observable, it will not work. We will see that when we take a look at observables in a later chapter. But next, let's take a look at Angular Routing and see how we can start navigating to different sections in our application.
- Setting up the infrastructure
- Displaying data in Angular 2
- Refining your layout with Angular Material
- Getting your data from Node.js
- Saving data to a list
- Creating the component
- Getting your input data
- Creating reactive forms in Angular
- Creating a security middleware
Skill Level Intermediate
Q: This course was updated on 10/17/2017. What changed?
A: We updated five videos to reflect changes to the setup and data retrieval and display processes in Angular 2. For example, instead of using a Git Angular template, the updated course uses the Angular CLI to generate a starting template, for a smooth runtime experience.