Javascript Angular2/RXJS-处理可能很长的查询

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

问题：如果用户选择的文件少于几百个，则此功能非常有效，否则会导致响应时间过长。我不想限制用户可以选择的文件数量，也不想担心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())
}

//前端用于收集文件信息的html
//从前端调用的函数，然后调用profile\u服务add\u files函数
//它沿着$event对象传递
添加文件（$event）{
此.profile\u服务。添加文件（$event）。订阅(
data=>console.log（'request returned'），
err=>console.error（err），
（）=>//更新视图函数
);       
}
//以下两个函数位于my profile_服务中，该服务将依赖项注入到我的componenet中
//格式化最终查询的事件对象
添加文件（事件对象）{
让文件_arr=[]；
让file_obj=event_obj.target.files；
for（让输入文件_obj）{
if（文件_obj.hasOwnProperty（键））{
文件\u arr.push（文件\u obj[key]['name']）
}
}
让query_obj={files:title_arr}；
返回此。保存文件（查询对象）
}
//这里是向后端发出实际请求的地方
保存文件（查询对象）{
让payload=JSON.stringify（query_obj）；
let headers=新的headers（）；
headers.append（'Content-Type'，'application/json'）；
返回此.http.post（'https://some_url/api/1.0/collection，有效负载，{headers:headers}）
.map（（res:Response）=>res.json（））
}

可能的解决方案：

成批处理请求。重新编写代码，以便一次仅使用25个文件调用配置文件服务，并在每次响应时使用接下来的25个文件再次调用配置文件服务。如果这是最好的解决方案，那么有没有一种优雅的方法来处理可观测数据呢？如果没有，我将使用递归回调，这应该可以很好地工作

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

---

欢迎任何其他解决方案。如果能找到一个最佳实践，以优雅的方式使用angular2/Observable处理这种类型的长时间查询，那就太好了。

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

另见 - - -

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

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

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

getAll（url:any[]）：可观察{
设可观测项=[]；
对于（变量i=0；iprocessValue（val），
（err）=>processError（err），
（）=>onDone（））；
}

我建议您将搜索的文件数量分成可管理的批，然后在返回结果时处理更多的文件，即解决方案#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

，但如果我没有弄错的话，在这种情况下，服务器似乎是资源限制。

瓶颈在哪里？查找文件的过程？还是响应太大？瓶颈是找到匹配文件并发送响应所需的时间。如果用户尝试匹配几千个文件，可能需要几分钟。如果瓶颈在文件匹配过程中，为什么不尝试缓存、多线程等来加快匹配速度？如果响应很大，即您实际返回所有文件，那么我可能会尝试分页或加载更多机制？或者不接受分页？您可以使用WebSocket吗？没有超时。让我看看WebSocket，看看这是否是一个可行的选择@sdfacre感谢您的建议，但我的目标是找到一种处理长响应时间的方法，而不是找到最小化响应所需时间的方法。我过分简化了这个问题，使其与主题保持一致，但实际上，查找实际上是一组复杂的db查询，经过了大量优化。此外，响应对象包含文件名，而不是文件本身，因此大小不是问题。同意，WebSocket将解决超时问题，因此这是一个有效的建议。但在前端分批处理请求，或者使用WebSocket和分批处理的组合也是如此。一个很好的答案是解释处理这些请求的各种方法，并包括一个代码示例，显示如何使用angular2/observables在前端实现。实际上，我认为这个问题对于StackOverflow来说太广泛了。同意，这可能有点太广泛了。至少我愿意接受一个答案，这个答案显示了使用observab发送多个请求的好方法