Question

我正在尝试在Angular 2 App中实现两个连续的HTTP请求。当用户单击登录按钮时，我想在LocalStorage中保存刷新和访问令牌，然后再执行一次HTTP请求以获取用户信息。我看过这篇文章，但它不适用于我的情况。 Angular 2 - Chaining http requests

这是我登录和getMe服务的初始实现：我怎样才能合并下面的请求？

login.component.ts

this.authenticationService.login(this.user.email, this.user.password)
        .subscribe(
        data => {
            // this.alertService.success('Registration successful', false);
            this.router.navigate([this.returnUrl]);
        },
        error => {
            console.log(error);
            this.alertService.error(error);
            this.loading = false;
        });

authentication.service.ts

login(email: string, password: string) {
    let headers = new Headers({
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'Cache-Control': 'no-cache'
    });
    let options = new RequestOptions({ headers: headers });
    return this.http.post(this.config.apiUrl + this.authenticationUrl + '/login',
        JSON.stringify({ email: email, password: password }), options)
        .map((response: Response) => {
            let tokens = response.json();
            if (tokens && tokens.token && tokens.refreshToken) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('tokens', JSON.stringify(tokens));
            }
        });
}

user.service.ts

  getMe() {
    console.log('getMe');
    return this.http.get(this.config.apiUrl + this.usersUrl + '/me', this.jwt()).map((response: Response) => {
        let user = response.json();
        if (user)
            localStorage.setItem('currentUser', JSON.stringify(user));
    });
}

Answer 1

您正在使用登录方法返回Observable，因此在您的数据订阅中，只需从您的用户服务中调用getMe（）。

this.authenticationService.login(this.user.email, this.user.password)
    .subscribe(
    data => {
        // Check to make sure data is what you expected, then call getMe()
        this.userService.getMe();
        this.router.navigate([this.returnUrl]);
    },
    error => {
        console.log(error);
        this.alertService.error(error);
        this.loading = false;
    });

这是解决这个问题的一种相当直率和不令人兴奋的方式。如上所述，mergeMap可以为您提供良好的服务。

查看这个快速示例。我建议使用Observable数据来了解正在发生的事情。在这种情况下，Observable.of基本上就像假网络请求一样。

http://jsbin.com/pohisuliqo/edit?js,console

Angular 2 - 顺序HTTP请求

1 个答案: