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

【问题标题】：How to get interim response in Angular HTTP - ArrayBuffer如何在 Angular HTTP 中获得临时响应 - ArrayBuffer
【发布时间】：2019-06-18 23:10:54
【问题描述】：

我在内部有一个 Electron 应用程序，我正在加载 Angular 应用程序。我正在通过 API 调用下载字节数组（即 ArrayBuffer）并将这些数据传递给我通过 electron.remote.require('./file-service') 连接的方法以在本地创建文件文件系统。

如果用户改变了路线，会弹出一个窗口提示确认导航。如果用户点击 ok 并且 http 请求介于两者之间，我需要存储接收到的字节。

示例 Angular 代码：

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;
    }

});

我正在尝试保存数据，如果 arraybuffer 大小为 25MB，而我收到 12MB 并且我正在尝试离开，那么在那一刻我需要存储 12MB。请协助我如何获得临时回复。

【问题讨论】：

临时响应是什么意思？哪有这回事。你的意思是说你想要一个 ArrayBuffer 的响应体？
@Rafael 我正在尝试保存数据，如果数组缓冲区大小为 25MB 并且我收到 12MB 并且我正在尝试离开，那一刻我需要存储 12MB。
是的，经过您的编辑，事情变得不那么模棱两可了；您想像 fetch api 一样像可读流一样流式传输响应。
@Rafael 是的。我正在尝试存储数据，直到窗口发生更改，我打算将其存储为零件文件。否则用户将浪费下载的数据。
@Rafael - 我正在使用 Angular 代码而不是在 Electron 端进行 API 调用。让我知道我需要为此使用什么 HTTP 方法？并且服务器端代码是使用 Java 实现的，我认为我也需要更改。

标签： angular electron httpresponse angular-http arraybuffer

【解决方案1】：

你提到你可以控制用java编写的后端代码。我不确定您是否可以将 responseType 设为文本并将编码的字节数组作为字符串发送。但是，如果可以的话，您可以从接收到的事件中获取 partialText 中的临时数据，以对其进行解码和存储。

     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;
    }

不要忘记请求进度

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

【讨论】：