Angular 8 - Why client makes multiple API calls to back-end

Question

I have a classic client application with API calls to the server to make operations on DB. But for some reason, every client method in service makes two calls to my controller when I need just once.

What's the reason, why and how I could fix it? Moreover, the second call comes also if the back-end didn't return anything yet but still performing operation.

That's some code example:

Method calls the service:

export class TestingComponent implements OnInit {

results: any;

constructor(
private testingservice: TestingService) { }

ngOnInit() {
let test = true;
this.startingMethod(test);
 }

startingMethod(test) {
    this.testingservice.getData(test).subscribe( data => {
        this.results = data;
  })};
}

Service method:

export class TestingService{

constructor(private configService: ConfigService, private http: HttpClient) { }

getData(test: boolean): Observable<any> {

let urlc = this.configService.getCurrentEndpoints();
let params = new HttpParams();
params = params.set('test', test);
return this.http.get<any>(`${urlc.baseUrl}${urlc.getdata}`, {'params': params });
}
}

I hope was clear enough, but if I don't freely ask me more details. Thanks a lot!

Answer 1

There may be two reasons for this case: As you mentioned that there are two calls for BE, maybe one of them is preflight request. You can read about this here: https://livebook.manning.com/book/cors-in-action/chapter-4/

The second reason may be multiple subscriptions:

You can change the calling of service call like:

startingMethod(test) {
    this.testingservice.getData(test).toPromise().then( data => {
        this.results = data;
  })}

or you can use a subscription object like:

subscription = new Subscription();

startingMethod(test) {
this.subscription.add(
    this.testingservice.getData(test).subscribe( data => {
        this.results = data;
  }));
}

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

Answer 2

Moreover, the second call comes also if the back-end didn't return anything yet but still performing the operation.

I suspect that you are refering to the OPTIONS request. That is a CORS preflight request that is generated by the browser itself which is totally normal.

OPTIONS requests are what we call pre-flight requests in Cross-origin resource sharing (CORS) .

They are necessary when you're making requests across different origins in specific situations.

Answer 3

Seems like it's a bug from the browsers, they sends the second request to get the favicon of the page, and since they don't have it, it just brings anything.

This is a link for the Chrome bug. https://bugs.chromium.org/p/chromium/issues/detail?id=39402

Firefox, and most other browsers, also send out a request for a favicon when they first connect, but cache the result ie if there isn't a favicon returned first time, they don't keep trying - which is why you're only seeing a single request from Firefox. It seems Chrome is unfortunately a little too persistent with its favicon requestiness.