This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Observables & Headers" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: What isn't observable? It's a lazy event stream. Anyone here familiar with node streams? Use gulp before? Those are streams. Very similar to that. But there's some differences. So it's a lazy event stream which emits zero or more events It's composed of subjects and observers. A subject performs some logic and notifies the observer at the appropriate times.
[00:00:28] So, we'll get more into it. So observer versus promise, this might help shed some light on it. So we're all familiar with promises in here. Right, okay, so observables are lazy. Whereas a promise, when you invoke the promise, it initializes and it comes back when it's ready, right?
[00:00:45] An observable doesn't. You can write all the code that's gonna run when the observable is notified. But it actually won't run yet, until you tell it to. It's lazy. They don't run unless you subscribe to something, while a promise will run as soon as you execute it. So that's pretty cool.
[00:01:07] Observe rules can define both setup and tear down aspects of asynchronous behavior and we'll get into that in a little bit, what that actually means. You can cancel an observable. You can be like Stop, I don't carry mine. I think that's pretty cool. Although some promise libraries allow you to do that too, like Bluebird.
[00:01:25] You can kind of get in there. Observables can be retried, while a caller must have access to the original function that returned the promise in order to retry. So, we'll see what that means too. So we don't need a reference to the observable to try it again, whereas in the promise we do, we need to save that reference.
[00:01:42] Whereas in the observable is the reference is actually a method that unsubscribes from itself. It took me awhile to get observables. There's this app, if you have an android phone, there's this app called ARCs marvels. And it teaches you, you seeing that up, yeah, there's a web one too.
[00:02:00] But i've been on my phone, just looking at that and it's helping me diagram out observables and stuff like that. I recommend checking it out. So, observable.subscribe, this is the thing, this it the method we're going to be interacting with the most here. So, subscribe just pretty must just starts your observable to listen on some type of stream here.
[00:02:22] And it really just takes, in this case, this three callbacks. The one is going to be the callback that happens when a piece of data comes through the stream. The second is going to be if an error is thrown and the third is going to be when there's no more data coming and we're about to be done.
[00:02:37] So very similar to promises almost. Or you have then a catch and then a finally. All right, so here's an example. So the source would be some type of oberservalbe stream and in our case it's going to be some type of hcp method. Probably aget or apost. And then were going to subscribe.
[00:03:00] To that observable. And when a piece of data comes in, in this case x, we're just gonna console.log Next. If an error were to happen, we would console.log Error. And finally when there's nothing more and we're unsubscribing, we're completed. So conceptually it's the same. Right now the only difference is the word subscribe.
[00:03:20] But if I put them there it looks just like I promised. It is just the word right now. So Observable.toPromise this is the method we can use to convert our observable back to a standard to a A plus spec promise. Which is familiar and sometimes you have to do it.
[00:03:47] So to do that you literally just call toPromise on and then you have a promise, done, easy. And this works with the AGCP module and angular too. Very convenient.
>> Scott Moss: Any questions on that so far? Cool.
>> Scott Moss: What is this, I don't know what this is, it's just a random-
[00:04:15]
>> Scott Moss: Random code sample in here, hey, look at me And then always what's important when handling AC operations error handling. So we talked about how observable handle errors, you can pass in a second argument to your subscribe. You can also just immediately do a .catch just like you would on a promise right on this observable and you can tune in for your error here.
[00:04:40] And then just throw it Observable.throw which will throw an arrow down the stream so it can be caught later on. Instead of just throwing it outside of the stack. So this is how you would implicitly throw them. So for instance if you were using Window.fetch which doesn't throw an error on like status codes 400 and above.
[00:04:59] You have to do it yourself. I wish they would fix that. You would have to do something like this.
>> Scott Moss: Any questions on this?
>> Scott Moss: Nope, all right, so an example of that, we were trying to get some file that doesn't exist. And we should be smart about it, and we should go ahead and try to catch that, that error there.
[00:05:31] So, we're going to try and handle it, and we're going to return this as variable. The difference with this and the premise is, it's like I said, it's going to shoot this error down the stream of observables so we can catch it later on, in the event that it does happen.
[00:05:42] But, you know, like, let's say we, see the thing about observables, you can compose them and this might be composed in another stream, so we don't want this error interrupting another stream of observables so this is why this is great. Whereas a promise, most invitations, if one promise fails it all just breaks.
[00:06:10] Any questions on this stuff? All right, okay, so headers inside http very important obviously when it comes to putting and getting things in authentication, authorization, identification, stuff like that. So to use headers, there is the headers class that comes with the angular2/http module that we can use to just set up headers.
[00:06:33] And we can pass them in as an options here, to our methods, like post, as you can see at the bottom. And they're pretty simple for you. This is a headers object that you attach to this request options object and you just pass that along. Is it really complicated?
[00:06:47] Yeah. Could we have just used regular modules? Probably. Regular objects? Probably, but this is how you do it.