根据 Angular 2 中先前请求的结果执行 http 请求

Question

我想在 Angular 2 中使用 Observable 时处理异步流。 具体来说，在每个用户的请求之前，我需要获取服务票，如果该票有效，用户可以得到适当的响应。因此，我必须在实际请求之前先进行http请求，如下所示，我调用了getServiceTicket()方法，但是由于异步流，在我获得有效的服务票证之前，没有执行以下http请求（getDetail）有效的服务票。所以我尝试使用像isServiceTicket这样的标志，但我意识到它并不能保证这两种方法的顺序运行。我试图做一些研究，但我找不到满意的答案。如果有人对此有很好的解决方案，您能给一些建议吗？

getServiceTicket() {
    this.userAuthServie.getServiceTicket().subscribe(
        (data: string) => {this.serviceTicket = data; this.isServiceTicket = true;}
    );
}

getDetail(id: string) { 
    this.getServiceTicket();
    return this.http.get('https://localhost/detail/' + id + '?ticket=' + this.serviceTicket)
    .map( (responseData) => {
        return <User>responseData.json();
    }
    );
}

Answer 1

您可以像下面这样更改您的代码：

user:User;

      getDetail(id: string) {

        this.userAuthServie.getServiceTicket()
          .subscribe((data: string) => {
            this.serviceTicket = data;
            this.isServiceTicket = true;
            this.http.get('https://localhost/detail/' + id + '?ticket=' + this.serviceTicket)
              .map( (responseData) => {
                this.user= <User>responseData.json();
              });
          });

      }

Answer 2

您可以将第二个要运行的函数放在第一个函数的订阅方法的成功部分。

getServiceTicket() {
    this.userAuthServie.getServiceTicket().subscribe(
        (data: string) => {
            this.serviceTicket = data; this.isServiceTicket = true;
            this.getDetail(id);
        }
    );
}

Answer 3

如果您想在执行任何“详细请求”之前等待加载服务票证，则应等待服务票证的响应以解决。有多种方法，一种方法可能是将详细信息添加到队列中，或者让 getDetails 等待服务票证加载完毕。

getServiceTicket() {
    // you need to return the observable from service ticket
    return this.userAuthServie
       .getServiceTicket()
       // use map here to only intercept the value.
       // remember that you need to subscribe somewhere else
       // if called from elsewhere than getDetail
       .map((data: string) => {
           this.serviceTicket = data;
           this.isServiceTicket = true;
           return data;
       });
}

getDetail(id: string) {
    return this.getServiceTicket()
        // we switch the observable from ticket to the one from detail using switchMap
        .switchMap((data: string) => {
            let url = 'https://localhost/detail/' + id + '?ticket=' + this.serviceTicket;
            return this.http
                .get(url)
                .map((responseData) => {
                    return <User>responseData.json();
                });
        });
    }
}