2

I'm working on a project with Angular 8. I am building a 'forgot password' page that will call 2 backend endpoints when the user clicks on the submit button.

Here is my code but I don't have any test urls that I can make public: https://stackblitz.com/edit/angular-8-app-example-zxzvt5

To get my http requests to follow through I had to call subscribe on them in this service: ForgotPasswordDataService

Why did I have to do that?

How can I change my code so that I don't need to subscribe and I want to do my routing to the next page in my component instead of my service? e.g.

  public onSubmit() {
    console.log(' on submit ');
    //submit to the server
    //route to the next page
    this.forgotPasswordDataService.forgotPassword(this.clientcode, this.email).subscribe(() => //TODO: route to the next page);
  }
Aubrey Quinn
  • 311
  • 1
  • 3
  • 10
  • Does this answer your question? [Angular 2 http.post() is not sending the request](https://stackoverflow.com/questions/36208732/angular-2-http-post-is-not-sending-the-request) – Igor Dec 03 '19 at 16:45
  • I don't think you quite understand how Angular does service calls and probably what is an Observable. @Aubrey Quinn comment can help you a lot and, after you feel a little more acquainted with this subject, I would suggest https://medium.com/angular-in-depth/when-to-subscribe-a83332ae053 – João Ghignatti Dec 03 '19 at 16:48
  • See also [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321/1260204) and [How do I return the response from an Observable/http/async call in angular?](https://stackoverflow.com/q/43055706/1260204) – Igor Dec 03 '19 at 16:52
  • @Igor that's very helpful thanks! However, is it possible to achieve what I'm trying to do? How can I keep my chain going? – Aubrey Quinn Dec 03 '19 at 16:54

3 Answers3

7

Short answer:

http.post() which is present in your service, is returning an Observable. You need to subscribe to Observables, for them to be fired and they will trigger the callback passed in the subscribe() asynchronously to perform operations on the result.

https://rxjs-dev.firebaseapp.com/guide/observable

Long answer:

You need to subscribe to get the return of the HTTP Post (For example if the HTTP post is well received by your API and that the transaction is successful, you will get a 201 Status code.)

That way, you can handle multiple cases of return status code (for example, what do you do whenyour request is ill-formed, or the resource has been moved.

Without subscribe, your http.post() will never get fired.

EDIT: How to handle your navigation problem ?

You can place the code of navigation in the subscription part.

For instance, .subscribe(() => this.router.navigate(//... route)) When the http.post() will return a status code (maybe you need to handle multiple cases), you will be redirected to the given page.

Axiome
  • 695
  • 5
  • 18
2

All work like the observer pattern. You use subscribe to register the component at the results about your operation because the operation is async. So when the operation is end return its value and the subscribe notify this to client

Doflamingo19
  • 1,591
  • 4
  • 12
  • 32
0

why you need to subcribe?
short and simple answer
if you read Angular documentation for httpclient all the methods i.e. get/put/post/delete starts with a line

Constructs an observable that, when subscribed,......

so if a method is constructing an observable then we need to subscribe to it to get the result therefore you need to subscribe

Sumedh Deshpande
  • 526
  • 8
  • 9