javascript - Angular 2 - 同时发出多个 HTTP 请求

Question

我实际上正在开发 Angular 2 应用程序，但我遇到了一些问题。事实上，我有一个从数据库中获取数据的方法。但是我正在尝试将此数据复制到另一个数据，为此我需要执行多个 HTTP 请求(请求编号永远不会相同)。

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

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

或者当我订阅该方法时，我没有收到它的响应。

这是我的订阅者

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

我希望我的方法在所有数据发布后返回响应!实际上，当我调用 addData() 方法时，它甚至不会触发 http 请求，什么也没有发生。我尝试使用一些 RxJs 方法，如 concat 和 forkJoin，但没有。或者只是我没有使用它们。

这是我的 addData() 方法

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

此方法非常适用于其他用例。

感谢您的帮助!

Answer 1

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

1. 从服务中获取一些数组(来自 rest 调用)
2. 对该数组中的每个元素进行 rest 调用
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 可以非常强大，几乎所有东西都可以写成流——根据经验，您可以记住:

• 每个action 只使用一个订阅(在您的情况下，action 是步骤 1-3)，如果您使用多个订阅，您不会考虑在信息流中
• 尽量避免订阅内的数据逻辑，订阅最好用于处理事件/发射/结果，例如migrationStream$.subscribe(..., ..., () => alert("迁移完成!"));