Angular2 APP_INITIALIZER嵌套了http请求

时间:2017-05-04 12:52:56

标签: angular angular-cli

我一直在尝试在引导过程中使用APP_INITIALIZER来加载一些配置数据(类似于How to pass parameters rendered from backend to angular2 bootstrap methodAngular2 APP_INITIALIZER not consistent等)。

我面临的问题是我需要发出2个请求,第一个请求到URL所在的本地json文件,然后请求该URL获取实际配置。

出于某种原因,启动是延迟,直到承诺结算。

这是通过APP_INITIALIZER

调用的加载方法
public load(): Promise<any> 
{
  console.log('bootstrap loading called');
  const promise = this.http.get('./src/config.json').map((res) => res.json()).toPromise();
  promise.then(config => {

    let url = config['URL'];
    console.log("loading external config from: ./src/" + url);

    this.http.get('./src/' + url).map(r => r.json()).subscribe(r => { this.config = r; console.dir(r);});
  });
  return promise;
}

这是一个完整的plnkr演示问题(检查控制台输出)。

显然,我错过了对这个概念的重要理解。

如何让应用程序等待两个请求在加载组件之前返回?

2 个答案:

答案 0 :(得分:6)

1)回复承诺

export function init(config: ConfigService) {
  return () => config.load();
}

2)保持秩序

public load(): Promise<any> {
  return this.http.get('./src/config.json')
        .map((res) => res.json())
        .switchMap(config => {
          return this.http.get('./src/' + config['URL']).map(r => r.json());
        }).toPromise().then((r) => {
          this.config = r;
        });
}

<强> Plunker Example

或与我们的rxjs运营商

public load(): Promise<any> {
  return new Promise(resolve => {
    const promise = this.http.get('./src/config.json').map((res) => res.json())
      .subscribe(config => {
        let url = config['URL'];
        this.http.get('./src/' + url).map(r => r.json())
          .subscribe(r => { 
            this.config = r;
            resolve();
          });
      });
  });
}

<强> Plunker Example

答案 1 :(得分:2)

你没有在提供的plunkr中回复任何承诺:

export function init(config: ConfigService) {
  return () => {
    config.load();
  };
}

实际应该是:

export function init(config: ConfigService) {
  return () => config.load();
}

export function init(config: ConfigService) {
  return () => {
    return config.load();
  }
}