Angular 2-多个HTTP请求在同一时间 [英] Angular 2 - Multiple HTTP request in the same time

问题描述

我实际上是在Angular 2应用程序上工作，但是我有一些问题.确实，我有一种从数据库获取数据的方法.但是，我正在尝试将此数据复制到另一个数据，要做到这一点，我需要执行多个HTTP请求(请求号永远不会相同).

I'm actually working on an Angular 2 application but i have a some problems. Indeed, i have a method which get data from a database. However i'm trying to copy this data to an other one, to do that i need to do multiple HTTP request ( the requests number are never the same ).

这是我的迁移方法.首先，我从数据库中获取数据，然后尝试将它们发布到另一个数据库中

Here is my migrate method. First I get the data from DB and then I try to post them in the other one

service.getDatas().subscribe( data => {
  let datas = data.json().data; 
  if (datas) {
    let requests = [];
    for (let data of datas) {
      let req = service.addData(data); // addData() return an Observable
      requests.push(req);
    }
    let c: Observable<any> = Observable.forkJoin(requests);
    return c;
  }
});

或者当我采用该方法时，我对此没有任何反应.

Or When i'm subribing to the method i have no Response from it.

这是我的订户

service.migrateData(targetDB).subscribe(res => {
      console.log(res);
    });

我希望我的方法在所有数据都发布后返回一个Response！实际上，当我调用addData()方法时，它甚至不会触发http请求，什么也不会发生.我尝试使用一些RxJs方法，例如concat和forkJoin，但一无所获.或者只是我使用它们失败.

I want my method to return a Response when all the data has been post ! Actually when i'm calling the addData() method it doesn't even trigger the http request, nothing happens. I tryed to use some RxJs method like concat and forkJoin but nothing. Or just i failed using them.

这是我的addData()方法

Here is my addData() method

addData(data) {
    let headers = new Headers({
      'Content-Type': 'application/json'
    });
    headers.append('Authorization', 'Basic ' + btoa('username + ':' + 'password));
    let _data = JSON.stringify({data: data});
    return this.http.post('https://something.com', _data, {headers: headers});
  }

此方法在其他用例中效果很好.

This method works very well for others use case.

感谢您的帮助！

推荐答案

根据您的代码，这是我的理解:

Based on your code this is what I understood:

1. 从服务中获取一些数组(通过rest调用)
2. 对该数组中的每个元素进行调用
3. 一切完成后最后得到一个结果

---

const migrationStream$ = service.getDatas()
  .map(data => data.json().data || [])        // and alternative to the "|| []" could be a subsequent ".filter(data => data && data.length)"
  .switchMap(datas => Observable.from(datas)) // split up the js-array into a stream
  .concatMap(data => service.addData(data))
  // .map(singleMigrateResponse => doSomethingWith(singleMigrateResponse))  // optional, is called for every data that is migrated
  .toArray() // optional: this will wait for the previous part of the stream to complete and return an array of all results, remove this if you want to receive every result as a single "next"

// run it by using:
migrationStream$.subsribe(next..., error..., complete...);

---

此方法在其他用例中效果很好.

This method works very well for others use case.

这里的一般性注释:如果使用得当，rxjs可能非常强大，几乎所有内容都可以写成流-作为经验法则，您可以记住:

As a genereal note here: rxjs can be very poweful if used properly, almost everything can be written as a stream - as a rule of thumb you can remember to:

• 每个 action 仅使用一个订阅(在您的情况下， action 是步骤1-3)，如果您使用多个订阅，您就不会考虑在溪流中
• 为避免在订阅中使用数据逻辑，最好将订阅用于处理事件/事件/结果，例如 migrationStream $ .subscribe(...，...，()=> alert(迁移完成！"));

• only use one subscribe per action (in your case the action is steps 1-3), if you are using more than one subscribe, you're not thinking in streams
• try to avoid data-logic within the subscription, the subscription is best to be used for handling events/emits/results, e.g. migrationStream$.subscribe(..., ..., () => alert("Migration is complete!"));

这篇关于Angular 2-多个HTTP请求在同一时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！