在两个单独的成功 http 请求后触发回调

Question

我的应用程序的根组件在 init 上从我的服务中调用两个异步函数来获取数据。我想知道如何在它们都完成后调用一个函数。我正在使用 angular 2.0.0-alpha.44 和打字稿 1.7.3

import {Component, OnInit} from 'angular2/angular2';

import {ServiceA} from './services/A';
import {ServiceB} from './services/B';


@Component({
  selector: 'app',
  template: `<h1>Hello</h1>`
})
export class App {
  constructor(
    public serviceA: ServiceA,
    public serviceB: ServiceB
  ) { }

  onInit() {

    // How to run a callback, after 
    // both getDataA and getDataB are completed?
    // I am looing for something similar to jQuery $.when()
    this.serviceA.getDataA();
    this.serviceB.getDataB();
  }
}

serviceA.getDataA 和 serviceA.getDataB 是简单的 http get 函数：

// Part of serviceA
getDataA() {
  this.http.get('./some/data.json')
    .map(res => res.json())
    .subscribe(
      data => {
        // save res to variable
        this.data = data;
      },
      error => console.log(error),
      // The callback here will run after only one 
      // function is completed. Not what I am looking for.
      () => console.log('Completed')
    );
}

Answer 1

您可以在它们的函数定义中传递 getDataA 和 getDataB 回调，然后按顺序调用任何您想要的：

function getDataA(callback) {
     // do some stuff
     callback && callback();
}

function getDataB(callback) {
     // do some stuff
     callback && callback();
}

function toCallAfterBoth() {
    // do some stuff
}
getDataA(getDataB(toCallAfterBoth));

Answer 2

您可以嵌套函数调用。

EG:

function getDataA (callback) {
    var dataA = {test:"Hello Data A"};
    callback && callback(dataA);
}

function getDataB (callback) {
    var dataB = {test:"Hello Data B"};
    callback && callback(dataB);
}

getDataA(function (dataA) {
    getDataB(function (dataB) {
        console.log("Both functions are complete and you have data:");
        console.log(dataA);
        console.log(dataB);
    });
});

Answer 3

一个简单的并行解决方案类似于：

let serviceStatus = { aDone: false, bDone: false };

 let getDataA = (callback: () => void) => {
     // do whatver.. 
     callback();
 }

 let getDataB = (callback: () => void) => {
     // do whatver.. 
     callback();
 }

 let bothDone = () => { console.log("A and B are done!");

 let checkServiceStatus = () => {

     if ((serviceStatus.aDone && serviceStatus.bDone) == true)
        bothDone();
 }

 getDataA(() => { 
     serviceStatus.aDone = true;
     checkServiceStatus(); 
});

getDataA(() => { 
     serviceStatus.bDone = true;
     checkServiceStatus(); 
});

我个人使用 RxJS 让我摆脱这种棘手的情况，可能值得一看。

编辑：

鉴于实际使用 RxJS 的反馈：

let observable1: Rx.Observable<something>;
let observable2: Rx.Observable<something>;

let combinedObservable = Rx.Observable
    .zip(
        observable1.take(1), 
        observable2.take(1),
        (result1, result2) => {
            // you can return whatever you want here
            return { result1, result2 };
        });

combinedObservable
    .subscribe(combinedResult => {
        // here both observable1 and observable2 will be done.
    });

此示例将运行两个可观察对象并行，并在它们都完成后将结果合并为一个结果。

在两个单独的成功 http 请求后触发回调

Fire callback after two separate successful http requests

javascript

rxjs

typescript

angular