Question

如何检查服务是否已完成然后运行其余代码？
例如：
我想从API中获取一些数据：

get_user_info(token: string): Observable<any> {
    return this.http.get(this.home + 'api/home/account/excerpt?token=' + token)
     .map((response: Response) => {
        return response.json().result;
     });
}

我要订阅get_user_info的数据：

retrieve_user_info() {
    this.http.get_user_info(this.back_result.token).subscribe(
        (result: sendBackUserInfo) => {
            if (result.result == 1) {
                this.user_info = result.user;
            } else {
                console.log(result.messages[0]);
            }
        }
    );
}

但问题是当我调用函数retrieve_user_info时，它不会立即获取数据。
我该如何解决？

修改
这就是我打电话给retrieve_user_info的方式：

submit_login_form() {
this.http.login_user(this.username, this.password, this.result.language.code)
    .subscribe((result: loginSendBackResult) => {
        this.back_result = result;
        this.retrieve_user_info();
        if (this.back_result.result == 1) {
            this.show_modal = false;
            console.log(user_info);
            router.navigate(['home']);
        }
    });
}

Answer 1

您可以使用 flatMap 来链接您的请求。你的命名也让我有点困惑。在提到服务方法时，我会将服务命名为service而不是http，以区分我们发出http请求的位置以及我们在服务中调用方法的位置。所以我在这些地方使用service代替。

import "rxjs/add/operator/mergeMap";

submit_login_form() {
  this.service.login_user(...)
    .flatMap((result: loginSendBackResult) => {
        this.back_result = result;
        return this.retrieve_user_info();
    });
    .subscribe(data => {
        if(this.back_result.result == 1) { 
           console.log(this.user_info)
           ....
        }
    })
}

和您的retrieve_user_info()

retrieve_user_info() {
  return this.service.get_user_info(this.back_result.token)
     .map((result: sendBackUserInfo) => {
        if (result.result == 1) {
           return this.user_info = result.user;
        } else {
           console.log(result.messages[0]);
        }
     });
}

Answer 2

这不是JS的问题。您的服务器响应速度比您需要的慢。你想要这个数据在哪里？在模板或其他一些功能。如果希望在模板中使用它，可以使用名为ngOnInit（）的函数捕获它，该函数可以在组件类中声明。

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnInit {
  ngOnInit() {
    // ...
  }
}

https://angular.io/api/core/OnInit

如果它采用不同的方法。请详细说明您如何以及在何处调用http请求以及您何时需要它。

retrieve_user_info() {
    this.http.get_user_info(this.back_result.token).subscribe(
        (result: sendBackUserInfo) => {
            // Get both data in one request
            // Better your REST API
            // Do your checks with the dependent data
            // If dependent data right then change the router guard
            // https://angular.io/api/router/CanDeactivate
            // Route the person using router
            // https://angular.io/api/router/Router
        }
    );
}

Answer 3

您可以使用：

subscribe(next?: (value: T) => void, 
          error?: (error: any) => void, 
          complete?: () => void): Subscription;

complete?部分仅在next?成功完成后才会执行，因此您可以确定数据已经返回。

角度2检查服务是否完成

3 个答案: