BG Development


  Reply to this topicStart new topicStart Poll

> Angular HttpClient извършва няколко request-а
emagi
Публикувано на: 23-05-2021, 11:53
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 544
Регистриран на: 12.03.07



Здравейте,

във Fiddler ми направи впечатление, че след като натисна бутон и изпратя HTTP request с помоща на HttpClient в Angular, се извърват няколко заявки

user posted image

Имате ли идеи на какво може да се дължи това?
PMEmail Poster
Top
relax4o
Публикувано на: 23-05-2021, 12:25
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2594
Регистриран на: 04.04.07



Неизчистен event listener на бутона? Това ми се е случвало като писах адд-ин за Outlook. Не беше на Angular, но начин, по който Microsoft изпълняваха кода в клиента, се получаваше едно стакване на click listeners и при последващо натискане, заявките се увеличаваха.

Каква е точно ситуацията при теб? Сигурен ли си, че трябва да търсиш проблема в HttpClient, а не в бутона?


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
emagi
Публикувано на: 23-05-2021, 13:11
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 544
Регистриран на: 12.03.07



QUOTE (relax4o @ 23-05-2021, 12:25)
Неизчистен event listener на бутона? Това ми се е случвало като писах адд-ин за Outlook. Не беше на Angular, но начин, по който Microsoft изпълняваха кода в клиента, се получаваше едно стакване на click listeners и при последващо натискане, заявките се увеличаваха.

Каква е точно ситуацията при теб? Сигурен ли си, че трябва да търсиш проблема в HttpClient, а не в бутона?

Това е готова компонента ("@ng-select/ng-select": "^6.0.0"), и за да изключа тази възможност, за която говориш поставих един
QUOTE
console.log
в event handler-a.
Имам само едно извикаване на този хендлър, но заявките към сървара са 3
PMEmail Poster
Top
thrawn
Публикувано на: 23-05-2021, 13:14
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 3098
Регистриран на: 17.01.17



А параметрите същите ли са (Тялото на заявката)?
PMEmail Poster
Top
emagi
Публикувано на: 23-05-2021, 13:42
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 544
Регистриран на: 12.03.07



UI

CODE

<div *ngFor="let item of (obj$ | async)?.offers; let i = index">
...............................
</div>


.ts
CODE
this.obj$ = this.doGetRequest(params);

.................................
public doGetRequest<T>(resourcePath: string, httpParams?: HttpParams): Observable<T> {
   const headersLocal = new HttpHeaders({});
   return this.httpClient
     .get<T>(this.basePath + resourcePath, { headers : headersLocal, params: httpParams});
 }
PMEmail Poster
Top
emagi
Публикувано на: 23-05-2021, 13:43
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 544
Регистриран на: 12.03.07



QUOTE (thrawn @ 23-05-2021, 13:14)
А параметрите същите ли са (Тялото на заявката)?

Същите
PMEmail Poster
Top
relax4o
Публикувано на: 23-05-2021, 14:05
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2594
Регистриран на: 04.04.07



А какво имаш в UI-а? И какво го кара да се рендира? HTTP заявката не се изпраща докато не използваш subscribe на метода или в твоя случай, в темплейта не използваш async на obj.

Ако никъде другаде не събскрайбваш на obj, означава, че този div по някаква причина се налага да се рендира няколко пъти, което пък кара да се събкрайбнеш също толкова пъти към метода.

Може да използваш някои от lifecycle hook-овете на Angular, за да разбереш кога и колко пъти този компонент бива рендиран и от там да потърсиш проблема.


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
emagi
Публикувано на: 23-05-2021, 14:23
Quote Post



Име:
Група: Потребител
Ранг: Редовен член

Мнения: 544
Регистриран на: 12.03.07



Проблема бе, че има на две места async

QUOTE
<ng-container *ngIf="obj$ | async else loadingone">
    <div *ngFor="let item of (obj$ | async)?.offers; let i = index">



Решението бе, да се ползва alias:
QUOTE
<ng-container *ngIf="obj$ | async as offerList else loadingone">
    <div *ngFor="let item of offerList?.offers; let i = index">


Както и:
QUOTE

public doGetRequest<T>(resourcePath: string, httpParams?: HttpParams): Observable<T> {
  const headersLocal = new HttpHeaders({});
  return this.httpClient
    .get<T>(this.basePath + resourcePath, { headers : headersLocal, params: httpParams})
    .pipe(share());
}
PMEmail Poster
Top
relax4o
Публикувано на: 23-05-2021, 15:36
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2594
Регистриран на: 04.04.07



Другия вариант е просто да събскрайбнеш в OnInit, и да напълниш масив, който да използваш в темплейта.


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0