Angular + RxJS - subscribe()

By Arvind Rai, December 16, 2023
1. subscribe() is a method of RxJS Observable class.
2. subscribe() invokes an execution of an Observable and registers Observer handlers for notifications it will emit.
3. When we call subscribe() method, only when Observable instance starts working.
4. Suppose we have to get data from HTTP URL and display on UI, Angular HttpClient.get() is used to create an Observable that will execute when we call its subscribe() method.
5. After execution, subscribe() listens for the values emitted by Observable as well as for when it completes or throws errors.

Parameters

The subscribe() method accepts an RxJS Observer that is a consumer of values delivered by an Observable. The Observer is a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete.
Find the parameter of subscribe() method as Observer.
subscribe({
  next: (value: T) => void,
  error: (error: any) => void,
  complete: () => void
}); 
1. next : Listens the values emitted by Observable. It is optional to use and default is undefined. If we omit this field, we will will not be able to receive values.
2. error : Listens for any error thrown in execution of Observable instance. It is optional to use and default is undefined. If the error field is not provided and an error happens, it will be thrown asynchronously. Errors thrown asynchronously cannot be caught using try/catch.
3. complete : Listens for execution completion even if there is error. It is also optional to use.

Examples

1. Using only next
a. Simple code with next field.
of("Welcome!").subscribe({
   next: (data: string) => console.log(data)
}); 
b. Use {} for multiple lines.
of("Welcome!").subscribe({
   next: (data: string) => {
      console.log("Inside next");
      console.log(data);
   }
}); 
c. If only next field is there, we can omit next keyword.
of("Welcome!").subscribe(
      (data: string) => console.log(data)
); 

2. Using only next and error
constructor(private http: HttpClient) { }
ngOnInit() {
  const url = "http://localhost:4200/students";
  const studentRecords$ = this.http.get(url);

  studentRecords$.subscribe({
    next: (data: any) => console.log(data),
    error: (err)=> console.log("Error occurred: ", err)
  });
} 
If studentRecords$ executes successfully, next field will execute and if there is error then error field will execute.

3. Using next and complete
studentRecords$.subscribe({
    next: (data: any) => console.log(data),
    complete: ()=> console.log("-- complete  --")
}); 
The next field will listen for successful studentRecords$ execution, and complete field will listen for execution completion and executes in all cases whether studentRecords$ executes successfully or emits error.

4. Using next, error and complete
studentRecords$.subscribe({
    next: (data: any) => console.log(data),
    error: (err)=> console.log("Error occurred: ", err),
    complete: ()=> console.log("-- complete  --")
}); 
If studentRecords$ executes successfully, next and complete field will execute.
If studentRecords$ executes unsuccessfully, error and complete field will execute.

Reference

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us