Angular http client cancel previous <get> calls when testing on a slow 3G network

Question

So I am testing my application on a slow 3G network and I have noticed that Angular HTTP client takes it upon itself to cancel previous calls which is bad as I need all calls sent to the server (data and even header are different, just URL same). Again, the ID is diff, so it makes no sense for Angular to decide that it is ok to just cancel the previous call ... odd!

See attached image. I am NOT using switchMap so all calls are supposed to go through even in the slow 3G network but yet Angular HTTP client cancels previous calls.

this is my http call:

const httpOptions2 = {headers: new HttpHeaders({'Content-Type': 'application/json'}), responseType: 'text' as 'json', 'rand': Math.random()};
        const url = `${this.coreAppData[0].webApiResellerBaseUrl}&command=UpdateUserPrivilege&privilegeId=${privilegeId}&accessMask=${accessMask}&customerUserName=${name}&rand=${Math.random()}`;
        return this._http.get<any>(url, httpOptions2).pipe(
            map((result: any) => result)
        );

as you can see no switchMap and I even added a random arg for url and header to try and fix the issue with no success.

Here is what you can see in the network console.

How do you force HttpClient to send ALL commands to server and not drop previous calls EVEN if URL is same (which is my case args are diff so super odd)

Thanks,

Sean.

Answer 1

I didn´t tested it in slow connections, but it works to upload files sequentially. I needed it to be sequentially, because my business logic requires it. But It may be useful to you.

I´m using a Promise here, because I need, conditionally, to do another operation.

  doUploadFiles() {
    let promise = new Promise((resolve, reject) => {
      from(this._files)
        .pipe(
          concatMap((file) => this.fileUpService.pushUpload(file, this.empresa ? this.empresa.cnpj : undefined)),
          finalize( () => {
            this.doProcessaAnalise()
              .subscribe( 
                (result: SimulacaoResult) => {
                  this.simulacaoResult = result
                  resolve(true)
                },
                (error) => reject(error) )
          })
        )
        .subscribe( (result: UploadResult) => {
          if ( ! this.empresa ) {
            this.empresa = result.empresa
          }

          ... do other stuff

          result.duplicatas.forEach( duplicata => this.duplicatas.push(duplicata))
          this.uploads.push(result)
        })
    })

    return promise
  }

The pushUpload method has nothing special:

  pushUpload(file, cnpjEmpresa?) {
    let body = new FormData
    body.set('xml', file)
    if ( cnpjEmpresa ) {
      body.set('cnpjEmpresa', cnpjEmpresa);
    }

    return this.httpClient.post(`${this.URL}`, body)
      .pipe(map( result =>  result))

  }