How to catch an error from Observable in this scenario?

Ionic Framework
1

Hello guys, I have the following code:

getVideos(): Observable<CategoriaVideoExplicativo[]> {
    return new Observable(observer => {
      this.http.get<CategoriaVideoExplicativo[]>("http://" + "localhost:8080"+ "/PortalPacienteRSHQ/api/v1/videos/get/0")
      .subscribe(categorias => {
        ...
        observer.next(...);
        observer.complete();
      });
    })
  }

With this kind of code how can I handle the error that could occur in this.http.get<CategoriaVideoExplicativo[]>... from where I call this method?
I’ve tried various combinations and none of them worked.

Thanks

2

why are you creating your own oberserver? in nearly 100% of the cases you do not need to create one of your own

getVideos(): Observable<CategoriaVideoExplicativo[]> {
      return this.http.get<CategoriaVideoExplicativo[]>("http://" + "localhost:8080"+ "/PortalPacienteRSHQ/api/v1/videos/get/0");
  }

in your component you should subscribe and not earlier. There you canhandle the error

      getVideos()
      .subscribe(categorias => {
        // success callback
      }, (error) => {
        // error callback
      } () => {
        // complete callback
      });

if you need to transform your data in the service function --> use the observable operators like .map

1 Like
3

Hi, that’s because I need to create objects Video and Categoria to do some stuff on their constructors, so i do it there to return an array ob objects instead of string, the json.

4

yeah, and you should do this within a map operation instead subscribing and wrapping everything in a custom observable.

our if you need to get send another request, checkout switchMap :wink:

1 Like
5

could you provide me how to use map to convert a response to a single object? I can’t seem to understand it from other examples.

Sorry, I’m kinda new.

6 
return this.http.xxx(yyy).map((response) => {
  // keep in mind: in older angular versions you need to call response.json(), to get the body as json
  // take the response and transform it like you want ... this is only an example
  const transformedData = doWhatYouWant(response)
  
  return trasnformedData
})

The .map is executed for every new data the observable provides.
So in your case an observable of a http call only returns 1 value, which is the response of your request, so your map is only called one time with the response :wink:

1 Like
7

Thank you very much, this is very useful!

Now that we are on it I might ask you one last question. Why do I need to do this.http.xxx(yyy).pipe(map((...?
it’s not working otherwise even if I import import { map, mapTo } from 'rxjs/operators'

Thank you very much!

8

Because once upon a time, we imported every RxJS operator under the sun. This made the people sad, because their app binaries were bloated full of stuff they didn’t really need.

So the gods gave us prototype patching, and for a while everybody thought that was neat, except it made the Observable class all conflicty and snarled and IDE writers complained that types couldn’t be inferred very easily.

The gods thought about this, and reorganized things giving us what they initially called “lettable operators”, which solved all the earlier problems at the cost of having us write “pipe” when we wanted to use them. The people had problems understanding what “lettable” meant, so now I think we call them “pipeable”, but that’s the basic story.

3 Likes
9

Okay, thank you very much =)