代码之家 › 专栏 › 技术社区 › Saurin

角度2+承诺、可观察和异步管道

angular2-observables angular-promise angular

Saurin · 技术社区 · 8 年前

我正在做angular 4的第一个项目,遇到了一个小问题。

但我遇到的问题是,例如,我对服务器进行了HTTP调用,现在我正在等待信息从服务器返回。但我需要这些信息来做一些数字运算。因此,我分配的等待服务器信息的变量返回时是未定义的,因为运行时的代码被执行,并且没有可分配的值。

ngOnInit(){
    this.settings = this.settingsService.getSettings();
    console.log("Logging Settings: " + this.settings);  // ends up being undefined
  }

onDoSomething(){
    return this.settings * gazillion;  // doesn't work 
}

什么是进行服务调用并让方法DoSomething知道延迟到您获得设置的正确方法?此外,如果你在整个应用程序中使用这些设置,你会如何存储这些设置,这样你就不会在每次需要这些设置时都不停地进行HTTP调用。

我的直觉是拥有这个应用程序。组件网。ts拨打电话并存储。

谢谢

3 回复 | 直到 8 年前

bryan60 8 年前

这是do或map操作符的完美用例,具体取决于您实际想要实现的目标:

this.settings = this.settingsService.getSettings().do(settings => this.doSomething(settings));

如果你只是想要一个“副作用”,比如你实际上不想影响你发送到显示器上的数据,你只想用它做一些与显示无关的事情,但你需要它发生在序列中的某个点上(我经常使用do()来隐藏页面范围内的内容加载弹出窗口或其他东西)。doSomething()是否返回值无关紧要,因为它不会被使用。

this.settings = this.settingsService.getSettings().map(settings => this.transformSettings(settings));

如果您想实际更改发送到显示器的数据,则在这种情况下会大量使用地图操作符。transformSettings()必须返回一个值,即您希望具体显示的值,因为该值将传递给最终订阅者。

对于第2部分,将结果存储在服务层的行为主题中,以便任何需要它的组件都可以使用它:

private settingsSource = new BehaviorSubject(null);
settings$ = this.settingsSource.asObservable().filter(e => !!e); //this prevents the initial null value from being sent
loadSettings() {
    this.http.get('settings').map(r => r.json()).subscribe(this.settingsSource);
}
constructor(private http: HttpClient) {
  this.loadSettings();
}

DankMeme420 8 年前

通常服务于角度2返回可观测值。这是因为http请求从服务器返回数据需要不同的时间。

我不确定getsettings到底在做什么,但一般设置如下:

//service layer
    function getSettings() {
        return this.http.get(`server-url`)
            .map((response: Response) => <any>response.json())
            .catch(this.handleError);
}

private handleError(error: Response) {
    return Observable.throw(error.json() || 'Server error');
}
//in your component
this.service.getSettings().subscribe(result => {this.settings = result}, error => {console.log("there was an error.")});

订阅部分在http请求响应客户端后被激发。

rjustin 8 年前

在此过程中,有几件事可以帮助你:

Angular将从http请求中返回一个可观察值,然后您可以使用subcribe()函数,并提供一个在检索到数据或数据失败时要执行的操作。

Here is a good tutorial on using http in an angular service

在您的特定情况下,您需要以下内容:

ngOnInit(){
    this.settings = this.settingsService.getSettings().subscribe((settings)=>{
    this.settings = settings;
    console.log("Logging Settings: " + this.settings);
}

Singleton Pattern