angular 2 nested subscription, http.post not being called

Question

I'm trying to compress an image before making an http post call

 this.activityService.addCourse(
      course,
      fileToUpload
    ).subscribe(
      (result) => {
          console.log(result);
          this.handleSuccess('course_added_successfully');
      },
      error => {
        this.handleError("an_error_occured");
      }
    );

And in the activityService.addCourse :

return this.imageService.compressImage(fileToUpload).map(result => {
      if (fileToUpload)    {
        fileToUpload = result;
        input.append("file", fileToUpload);
        input.append("filetype_id", String(0));
      }
      if (typeof result.name !== 'undefined' && typeof result.size !== 'undefined' && typeof result.type !== 'undefined') {
        this.http.post(Constants.URL_ADD_COURSE, input)
          .map(FunctionsService.extractData).catch(FunctionsService.handleError);
      }
      else {
        Observable.throw('Error compressing image');
      }
});

When debugging i can see that the call arrives to this.http.post(Constants.URL_ADD_COURSE, input) and the returned value is successful, but the call is simply not being made (In Inspect element > Network i can see that nothing happened)

jvalli · Accepted Answer · 2017-02-09 08:34:30Z

1

I notice you never subscribe to the this.http.post observable. That is a cold observable meaning that it won't actually do anything until someone subscribes to it. If you really don't care about the the result of the call itself you can also call .publish() which turns it into a hot observable instead.

EDIT: One option is to call switchMap instead of map. That way you can be sure that the http request was completed before continuing with the rest of the processing.

return this.imageService.compressImage(fileToUpload).switchMap(result => {
  if (fileToUpload)    {
    fileToUpload = result;
    input.append("file", fileToUpload);
    input.append("filetype_id", String(0));
  }
  if (typeof result.name !== 'undefined' && typeof result.size !== 'undefined' && typeof result.type !== 'undefined') {
    return this.http.post(Constants.URL_ADD_COURSE, input)
      .map(FunctionsService.extractData).catch(FunctionsService.handleError);
  }
  else {
    return Observable.throw('Error compressing image');
  }
});

If you really want to treat is an unimportant 'side call' and ignore the results you can just use

this.http.post(Constants.URL_ADD_COURSE, input)
 .map(FunctionsService.extractData)
 .catch(FunctionsService.handleError)
 .publish();

edited Feb 9, 2017 at 8:34

answered Feb 8, 2017 at 9:01

jvalli

7214 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dany Y Over a year ago

how do i subscribe to it? i thought that since i'm subscribing to the compressImage and this one is nested in it it will be called automatically. Can you give me more info ?

jvalli Over a year ago

You probably want to use switchMap instead of map and make sure that the inner observable get's returned from the lambda function.

Collectives™ on Stack Overflow

angular 2 nested subscription, http.post not being called

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related