问题 1
这是一个实现一个函数的示例，该函数在收到响应时调用自身。
后端：
- 模拟一个在 5 秒和 10 秒内响应的慢速后端
- 在每次响应时，服务器都会给出当前的
request_number 和state
- 对于 3 个第一响应，
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 在客户端机器中存储 1M 行 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>