在两个独立的成功http请求后激发回调
Fire callback after two separate successful http requests
init上我的应用程序的根组件从我的服务中调用两个异步函数来获取数据。我想知道如何在它们都完成后调用一个函数。我使用的是angular 2.0.0 alpha.44和typescript 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获取函数:
// 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')
);
}
一个简单的仍然并行的解决方案应该是这样的:
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.
});
本例将并行运行两个可观察器,并在两者都完成后将结果合并为一个结果。
您可以在函数定义中传递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));
您可以嵌套函数调用。
例如:
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);
});
});
相关文章:
- Meteor如何接收HTTP请求
- 在我的情况下,如何进行http请求
- 使用插件收听Firefox标签的http请求
- Angularjs http.get() Cross-Origin 请求被阻止
- http请求使用html而不是json进行响应
- 在node-js路由中发出http请求
- 通过sdk/system/events在修改请求观测器上测试http
- 是否可以在没有HTTP请求或<输入>
- Acync JS HTTP请求通知请求
- PhantomJs在控制台中发出http请求时不会返回任何状态
- 当我在chrome中切换设备模式时,$http.get请求失败
- PHP处理来自一个页面的http请求,并将其显示在另一个页面上
- 使用angular js通过代理服务器请求Http
- 如何从HTTPS服务器请求HTTP服务器的javascript文件
- 阻止的跨来源请求:http://api.fixer.io/latest.
- 坏的请求.HTTP POST到api
- 有没有办法为AngularJS JSON请求($http/$resource)使用浏览器缓存?
- angular js在每个http请求$http上添加请求参数
- 当从不存在的站点请求HTTP响应时,Node.js脚本会中断
- 通过代理服务器请求HTTP呼叫