如何在Angular HTTP中获得临时响应-ArrayBuffer

Question

I'm having a Electron application internally I'm loading the Angular application. I'm downloading a byte array (ie, ArrayBuffer) through an API call and passing those data to a method which I'm connecting through electron.remote.require('./file-service') to create a file in a local file system.

If the User changes the route, a popup window will prompt to get the confirmation of navigation. If the User clicks ok and the http request is in between, I need to store the received bytes.

Sample Angular Code:

declare var electron: any;
const { createDataFile } = electron.remote.require('./file-service')

const payLoad = new FormData();
const httpOptions =  {
      headers: new HttpHeaders(),
      reportProgress: true,
    };

const req = new HttpRequest('GET', 'http://localhost:8080/getData', payLoad, {...httpOptions, responseType: 'arraybuffer'});
this.http.request<ArrayBuffer>(req).subscribe((event: HttpEvent<ArrayBuffer>) => {

    switch (event.type) {
        case HttpEventType.DownloadProgress:
            // This method will manipulate and show the progress bar in the UI
            this.updateProgress(event.loaded);
        break;
        case HttpEventType.Response:
            createDataFile(event.body)
        break;
    }

});

I'm trying to save data, If the arraybuffer size is 25MB and I received 12MB and I'm trying to navigate away, in that moment I need to store that 12MB. Kindly assist me how to get the interim response.

Answer 1

You mentioned you can control the back end code written in java. I am not sure if you can make responseType a text and send encoded byte array as a string. But if you can then you can get interim data in partialText from the event you receive to decode and store it.

     interface HttpDownloadProgressEvent extends HttpProgressEvent {
      type: HttpEventType.DownloadProgress
      partialText?: string  //The partial response body as downloaded so far.Only present if the responseType was text.

      // inherited from common/http/HttpProgressEvent
      type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress
      loaded: number
      total?: number
    }

    switch (event.type) {
        case HttpEventType.DownloadProgress:
            // This method will manipulate and show the progress bar in the UI
            this.updateProgress(event.loaded);
//////////////////////////////////////////////////////////////////////////////
            store event.partialText; 
/////////////////////////////////////////////////////////////////
        break;
        case HttpEventType.Response:
            createDataFile(event.body)
        break;
    }

Don't forget requestProgress

const req = new HttpRequest('POST', 'upload/file', file, {
  requestProgress: true
});