How can i write function that trigger/refresh a http post method programatically?

Question

How can i write a method in far far away component,when forexample i click a button and this post method subscribe will run again? I think with a service i should get here...It(this.qwe) has not to be in constructor its just an eaxample...

  import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'post-request',
  templateUrl: 'post-request.component.html',
})
export class PostRequestComponent {
  postId;

  constructor(private http: HttpClient) {
      this.qwe()
  }
  

  qwe() {
    this.http
      .post<any>('https://reqres.in/api/posts', {
        title: 'Angular POST Request Example',
      })
      .subscribe((data) => {
        this.postId = data.id;
      });
  }
}

Use a service if you want components to communicate with each other. — Mohamed Karkotly, Jun 27 '22 at 19:29
No idea, why you would use it, but if your `qwe()` function would return the observable `this.http.post(...)` as is (instead of the subscription), you can subscribe multiple times to it. `this.qwe().subscribe(...)`. — W.S., Jun 27 '22 at 20:00
By the way, if you're looking to refresh data coming from an api, take a look at the usage of an RxJS switchMap. — W.S., Jun 27 '22 at 20:07

Chris Hamilton · Answer 1 · 2022-06-28T01:44:17.177

If you're just trying to make some post requests see the first section, if you actually need to call another component's methods see the second section.

I'm afraid you might be making a whole component just to make post requests - which is not necessary. You can just make a service for this.

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor(private http: HttpClient) {}

  post(): Observable<any> {
    return this.http.post<any>('https://reqres.in/api/posts', {
      title: 'Angular POST Request Example',
    });
  }
}

Then make the request in any component

export class SomeComponent {
  constructor(private myService: MyService) {}

  qwe() {
    this.myService.post().subscribe((data) => {
      console.log(data);
    });
  }
}

If you want other components to call this component's methods you can create a service for this component. You can put a Subject inside of it, which this component can subscribe to, and other components can call next() on.

@Injectable({
  providedIn: 'root',
})
export class PostRequestService {
  qweSubject = new Subject<void>();
}

In this component, we can subscribe to the subject so we know when other components want to call the method. Make sure to unsubscribe when the component is destroyed to prevent memory leaks - this is necessary because the service never gets destroyed, so the subject will not clean up its own subscriptions.

export class PostRequestComponent implements OnInit, OnDestroy {
  postId: any;
  qweSub = new Subscription();

  constructor(
    private http: HttpClient,
    private prService: PostRequestService
  ) {}

  ngOnInit(): void {
    this.qweSub = this.prService.qweSubject.subscribe(() => this.qwe());
  }

  qwe() { ... }

  ngOnDestroy() {
    this.qweSub.unsubscribe();
  }
}

And in other components, we inject the service and call next() when we want to call the method.

export class SomeComponent {
  constructor(private prService: PostRequestService) {}

  qwe() {
    this.prService.qweSubject.next();
  }
}

How can i write function that trigger/refresh a http post method programatically?

1 Answers1