Angular 2 - HTTP and Observables
Angular 2+ Essential Training: https://goo.gl/yjQPIu
Repo: https://goo.gl/2Rrt2g
In this video we’ll be discussing HTTP and observables. We’ll first discuss what an Observable is and how it differs from a typical promise-based response. Then we’ll discuss how to perform Http requests.
0:00 - Intro to HTTP
1:13 - Observables Explained
3:30 - Http in Angular 2
4:32 - Http with Observables in our App
9:24 - Http Solution
HTTP is what we use whenever we want to retreive something from our database or an API. Not a lot has changed between angular 1 and angular 2 in this regard. We’re still using the keyword http in order to perform our requests. What has changed is how we handle the response.
Angular 2 has made the switch to using RxJS observables. Observables essentially emit responses over time, instead of the response being a one time occurance. So we’ll first discuss what an Observable is and how it differs from a typical promise-based response.
Then we’ll discuss how to perform Http requests. This will include performing an http GET request to retrieve our data, processing the response object as an Observable and then subscribing to the Observable in our component. We’ll be using our ngOnInit lifecycle hook in order to display our data.
In this video we’ll dig deep into understanding Observables. Observables are part of the reactive extensions library also known as RxJS and are used extensively in Angular 2.
You can learn all about reactiveX here at reactivex.io. The purpose of reactiveX is to provide an API for asynchronous programming with observable streams.
So what does that mean exactly?
It means that observables provide us with an asynchronous stream of data we can subscribe to. So that when new data has been emitted we can automatically receive the new data coming in.
You can think of this as receiving the changes in stock prices. Since the price of stocks is constantly fluctuating, an observable could be used to update these prices as they come in.
Observables work like an array, so we’ll be using the map operator in order to process the response. To better understand this lets go over to reactivex.io then click ‘choose your platform’ then javascript. We get taken to the github page. If we scroll down a bit we see an example.
This is very similar to what our service will look like. So this source is going to be to the response we get back, like a JSON file for example. We can filter the response to match a selected criteria. Then we need to call map on the response in order to shape the data.
Once the data is shaped, it gets passed to a subscriber. This subscriber is going to be located inside our component and will be used to display the data in our view and process any errors.
So how is an observable different from a promise? Observables work with multiple values over time. Whereas promises return only a single value. Observables are cancellable, promises are not cancellable. Observables can be manipulated using javascript functions like map, filter and reduce.
Now that we have a better understanding of what Observables are, lets discuss working with Http requests.
We use http in order to send requests for data. A few requests we can make are GET requests in order to fetch some data. And PUT requests that are used to add or alter some piece of data.
Angular makes it very easy for us to work with these http requests. All we need to do is import Http from angular/http, then add the HttpModule inside our NgModule file and add it to our list of imports. We need to create an instance of Http so it can be used in our class. We do this inside the constructor by adding a private variable of http. Then we can start making requests. In this case it’s a get request made to a books.json file located in our api folder. Then we need to map our response before sending it to the component.
Lets now add an Http GET request to our application.