Question

问题1： 如何实现相同的行为？但不是Observable.interval 它将被回调调用。

例如： 我的时间间隔为5000ms，但是我的服务器非常慢，并且在5000ms之后仍无法恢复结果。但是在5000ms之后调用下一个调用。我不要那样我想在结果从服务器返回后将调用下一个调用。

问题2： 如何立即将结果流式传输到csv文件，而不一个接一个地创建多个文件。对于当前的实现，我使用FileSaver中的IE11。我想继续使用它。有没有一种方法可以将数据流式传输到文件，而不是将其收集到数组中，因为我的数据集很大。像一百万行等等... 示例：

const progress = Observable.interval(1000)
  .switchMap(() => this.messageService.getResults(query))
  .map(messageResult => messageResult)
  .subscribe((data: MessagesResult) => {
    inProcess = true;
    if (!data.isMoreResults && data.auditMessageList.length === 0) {
      this.fileSaver.save(`result.csv`, csvData);
      inProcess = false;
      this.logger.info('Download file finished...');
      progress.unsubscribe();
    }
    const start = this.filterModel.offset * this.filterModel.limit;
    const rows = [...csvData];
    rows.splice(start, 0, ...data.auditMessageList);
    csvData = rows;
    if (inProcess) {
      this.logger.info('Exporting in progress...');
    }
    query.offset++;
  }, error => this.logger.error(error));

}

Answer 1

您发现使用Observable.interval不会在流的其余部分“等待”。

我通常将repeatWhen与delay一起使用

const progress = Observable.defer(() => this.messageService.getResults(query))
  .repeatWhen(notifications => notifications.delay(1000)) 
  ...

这是有效的示例：https://jsfiddle.net/a0rz6nLv/19/

我对您其余的代码不太了解。

请勿在{{1}}方法中使用progress.unsubscribe();。而是考虑使用takeWhile或takeUntil-两者都会为您完成可观察的项目。

subscribe

例如，可以使用reduce或toArray

完成缓冲结果

.takeWhile(data => data.isMoreResults  data.auditMessageList.length > 0)

副作用最好由do运算符

处理

.reduce((accumulator, data) => data.auditMessageList.concat(accumulator), [])

关于第二个问题-我不知道-您应该能够从服务器流式传输csv。如果您无法修改服务器，也许其他人会知道如何在客户端上进行操作...

Answer 2

问题1

下面是一个示例，该示例实现了一个函数，该函数在收到响应时会调用自身。

后端：

模拟在5s和10s内响应的缓慢后端
每次响应时，服务器都会给出当前的request_number和一个state
对于前三个响应，state为active，此后state为closed

代码：

/* Mocked backend. I'm slow, like really slow */
class SlowBackend {
  MAX_ITERATIONS = 3; // suppose you're reading a table and you have pagination, with 3 pages
  currentIteration = 0;

  constructor() {}

  getStuff() {
    console.log(`**Request N. ${this.currentIteration}**\n[Back] : received a request from the front`);
    const responseDelay = Math.random() * 5000 + 5000; // response between 5s and 10s
    let state = "open";
    if(++this.currentIteration > this.MAX_ITERATIONS)
      state = "closed";

    return Observable
      .timer(responseDelay)
      .map( () => {
      console.log(`[Back] : Responding after ${responseDelay} ms`)
        return {
          request_number : this.currentIteration,
          state : state
        };

      })
  }
}

正面：

这基本上是您的组件。

class Frontend {

  isPollingActivated = true;
  responses = [];


  constructor(private backendService) {
    this.backendService = new SlowBackend(); // connection to backend
    this.requestOnRegularBasis();
  }

  requestOnRegularBasis() {
    if (!this.isPollingActivated)
      return;

    this.backendService.getStuff()
      .subscribe(response => {
        console.log(`[Front] : received response from server. State : ${response.state}`);

        // Choose one of the following blocks, comment the other according to what you need

        // Block 1 : Sync processing example
        console.log(`[Front] : doing some sync processing`);
        this.doSomeSyncProcessing(response);
        this.requestOnRegularBasis();

        // Block 2 : Async processing example
        // console.log(`[Front] : doing some async processing`);
        // this.doSomeAsyncProcessing(response)
        //    .subscribe(this.requestOnRegularBasis);

      })
  }

  private doSomeSyncProcessing(response){
    if(response.state == 'closed'){
      this.isPollingActivated = false; // stop polling
      this.saveDataToCsv();
    }
    else
      this.responses.push(Object.values(response).join(';')) // csv line separated by ';'
  }

  private saveDataToCsv(){
    const headers = ['current_request;state']
    this.responses = headers.concat(this.responses)
    console.log('saving to csv : ', this.responses.join('\n'));

    // Uncomment this to use FileSaver API
    /*
    const blob = new Blob(headers.concat(this.responses), {type: "text/csv;charset=utf-8"});
    saveAs(blob, "my_responses.csv");*
    */
  }

  private doSomeAsyncProcessing(response){
    return Observable.timer(1000).map(() => this.doSomeSyncProcessing(response));
  }

}

输出：

**Request N. 0**
[Back] : received a request from the front
[Back] : Responding after 5482 ms
[Front] : received response from server. State : open
[Front] : doing some sync processing
**Request N. 1**
[Back] : received a request from the front
[Back] : Responding after 7489 ms
[Front] : received response from server. State : open
[Front] : doing some sync processing
**Request N. 2**
[Back] : received a request from the front
[Back] : Responding after 9627 ms
[Front] : received response from server. State : open
[Front] : doing some sync processing
**Request N. 3**
[Back] : received a request from the front
[Back] : Responding after 5806 ms
[Front] : received response from server. State : closed
[Front] : doing some sync processing
saving to csv :
current_request;state
1;open
2;open
3;open

问题2

不能。

至少不使用FileSaver。因为它不支持逐块编写。实例化Blob时，您必须准备好所有数据。有一些库支持块，但是它们要么用于服务器端（例如，node.js），要么特定于浏览器。

检查：Save client generated data as file in JavaScript in chunks

注意：

如果您尝试使用js在客户的计算机中存储一百万行csv，则该体系结构可能有问题。因为这不是浏览器的常见用例。客户端应该被认为机器性能较弱，因此需要处理，轻便，易于解析的信息。为此，您可以例如在服务器端构造csv，拥有写流文件的所有权利，并具有适当的处理/内存容量。

演示：问题1

http://jsbin.com/rojutudayu/2/edit?html,js,console

演示：如何下载Blob？

    <script src="https://cdn.rawgit.com/eligrey/FileSaver.js/e9d941381475b5df8b7d7691013401e171014e89/FileSaver.min.js"> </script>

<script> 
var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");
</script>

Answer 3

问题1：

使用forkJoin。它将等待所有可观测对象完成。与delay(5000)结合使用时，最短时间为5秒。如果5秒钟前未返回API响应，它仍将等待直到返回结果（demo）

const stream1$ = of(1).pipe(
  delay(5000)
);

const intervalTime = Math.random() * 5000 + 5000

// replace with your API stream
const stream2$ = of(intervalTime).pipe(
  delay(intervalTime)
);

forkJoin(stream1$, stream2$)
  .subscribe(([_, s2]) => {
    console.log(s2);
  })

问题2：

如果文件很大，则应让Web浏览器处理它。最好将文件保存在服务器中，然后返回链接进行下载。对于小文件，性能不是问题。您可以将文件数据存储在RAM中，然后保存一次。

编辑：如果文件很大，FileSaver开发人员建议使用StreamSaver。你应该看看

StreamSaver.js采用不同的方法。现在，您实际上可以直接在文件系统中创建可写流，而不是将数据保存在客户端存储或内存中（我不是在谈论chromes沙盒文件系统）

StreamSaver.js是在客户端保存流的解决方案。对于需要保存在RAM确实受到限制的客户端（如移动设备）上创建的大量数据的Web应用程序来说，它是完美的选择。

对HttpClient结果进行长时间轮询并流式传输到CSV文件

3 个答案:

问题1

问题2