Angular2/RXJS - 处理潜在的长查询

Question

目标：应用程序的前端允许用户从本地机器中选择文件，并将文件名发送到服务器。然后，服务器将这些文件名与位于服务器上的文件进行匹配。然后服务器将返回所有匹配文件的列表。

问题：如果您的用户选择的文件少于几百个，这会非常有用，否则会导致响应时间过长。我不想限制用户可以选择的文件数量，也不想担心前端的 http 请求超时。

到目前为止的示例代码：

//html on front-end to collect file information
<div>
    <input (change)="add_files($event)" type="file" multiple>
</div>

//function called from the front-end, which then calls the profile_service add_files function
//it passes along the $event object
add_files($event){

    this.profile_service.add_files($event).subscribe(
        data => console.log('request returned'),
        err => console.error(err),
        () => //update view function
    );       
}

//The following two functions are in my profile_service which is dependency injected into my componenet
//formats the event object for the eventual query
add_files(event_obj){

        let file_arr = [];
        let file_obj = event_obj.target.files;

        for(let key in file_obj){
            if (file_obj.hasOwnProperty(key)){
                file_arr.push(file_obj[key]['name'])
            }
        }

        let query_obj = {files:title_arr};

        return this.save_files(query_obj)
}

//here is where the actual request to the back-end is made
save_files(query_obj){

    let payload = JSON.stringify(query_obj);
    let headers = new Headers();

    headers.append('Content-Type', 'application/json');
    return this.http.post('https://some_url/api/1.0/collection',payload,{headers:headers})
        .map((res:Response) => res.json())
}

可能的解决方案：

1. 批量处理请求。重新编写代码，以便一次仅使用 25 个文件调用配置文件服务，并在每次响应时再次使用接下来的 25 个文件调用配置文件服务。如果这是最好的解决方案，是否有一种优雅的方法可以用 observables 做到这一点？如果没有，我将使用应该可以正常工作的递归回调。

2. 让端点立即返回通用响应，例如“文件匹配正在上传并保存到您的配置文件”。由于所有匹配的文件都保存在后端的数据库中，这将起作用，然后我可以让前端每隔一段时间查询数据库以获取匹配文件的当前列表。这看起来很难看，但我想我会把它扔在那里。

欢迎任何其他解决方案。如果能以一种优雅的方式使用 angular2/observables 处理这种类型的持久查询，那就太好了。

Answer 1

我建议改用 websocket 连接，因为它们不会超时。

另请参阅 - https://www.npmjs.com/package/angular2-websocket - http://mmrath.com/post/websockets-with-angular2-and-spring-boot/ - http://www.html5rocks.com/de/tutorials/websockets/basics/

另一种方法是轮询，客户端在定义的时间间隔内重复请求以从服务器获取当前处理状态。

发送多个请求并等待所有请求完成

getAll(urls:any[]):Observable {
  let observables = [];
  for(var i = 0; i < items.length; i++) {
    observables.push(this.http.get(urls[i]));
  }
  return Observable.forkJoin(observables);
}

someMethod(server:string) {
  let urls = [
   '${server}/fileService?somedata=a',
   '${server}/fileService?somedata=b',
   '${server}/fileService?somedata=c'];

  this.getAll(urls).subscribe(
      (value) => processValue(val),
      (err) => processError(err),
      () => onDone());
}

Answer 2

我建议您将搜索的文件数量分解为可管理的批次，然后在返回结果时处理更多文件，即解决方案 #1。以下是未经测试但我认为完成此任务的相当优雅的方式：

add_files(event_obj){

    let file_arr = [];
    let file_obj = event_obj.target.files;

    for(let key in file_obj){
        if (file_obj.hasOwnProperty(key)){
            file_arr.push(file_obj[key]['name'])
        }
    }

    let self = this;
    let bufferedFiles = Observable.from(file_arr)
        .bufferCount(25); //Nice round number that you could play with

    return bufferedFiles

       //concatMap will make sure that each of your requests are not executed
       //until the previous completes. Then all the data is merged into a single output
       .concatMap((arr) => {

         let payload = JSON.stringify({files: arr});
         let headers = new Headers();
         hearders.append('Content-Type', 'application/json');

         //Use defer to make sure because http.post is eager
         //this makes it only execute after subscription
         return Observable.defer(() => 
            self.post('https://some_url/api/1.0/collection',payload, {headers:headers})
       }, resp => resp.json());
}

concatMap 将阻止您的服务器执行超过缓冲区大小的任何内容，方法是在前一个请求返回之前阻止新请求。如果您希望它们全部并行执行，您也可以使用mergeMap，但如果我没记错的话，似乎服务器是这种情况下的资源限制。