Angular 7 Handling large post http request

Question

I have post http request which sends large amount of data, and contains array which can be quite large. I am trying to split the request so instead sending one request which contains all of the data, I would like to send it in chunks.

// service.ts
saveRequest(request: AutomationChecklist) {
  return this.http
    .post(this.url + this.saveRequestUrl, request, this.options)
    .map((response: Response) => {
      return response.json();
    });
}

// automationChecklist.ts
export class AutomationChecklist {
  siteInformation: siteInformation;
  orderInformation: OrderInformation;
  requestInformation: RequestInformation;
  contactInformation: ContactInformation;
  installations: Installation[]; // save this separately, this one can be quite large
  completedAutomation: number;
  progress: number;
}

what can be the possible solution to handle this request? I have read about forkjoin rxjs but not sure if it will be suitable for this situation?

you can bring only visible informations, all AutomationChecklist fieds are visible ? — bubbles, Sep 04 '19 at 09:40
I am not sure what you meant here?.. I need to store all the data, but installation checklist data becomes quite big and I want to have multiple request or someway to store the data properly without causing too much load on the server — Muhammad Ali, Sep 04 '19 at 10:09
sorry i thought it's a read request, that's why i'm talking about visualisation — bubbles, Sep 04 '19 at 12:28

score 1 · Accepted Answer · answered Sep 04 '19 at 12:46

If you want to separate installations you can do it using the concatMapTo operator :

saveRequest(automations: AutomationChecklist, installations: Installation[]) {
  return this.http
    .post(this.url + this.saveRequestUrl, automations, this.options)
    .pipe(concatMapTo(this.http.post(this.url + /*installations save url*/, installations, this.options)))
    .map((response: Response) => {
      return response.json();
    });
}

Drawbacks of this solution:

Two separate requests for the same requirement (create a new backend endpoint)
Not atomic : the installations request may fail but the first one is succeeded (may lead to inconsist result)
Installations request waits the first one to terminate

It depends on what you want to do, if you accept inconcistency, it could be a good solution to lighten your request.

score 0 · Answer 2 · answered Sep 04 '19 at 12:10

lets say you have an array of data, below code will post to api with a concurrency of 3

array=[data,data,data]
const concurrency=3
from(array).pipe(mergeMap(request=>this.http
    .post(this.url + this.saveRequestUrl, request, this.options),null,concurrency)

Angular 7 Handling large post http request

2 Answers2

Linked