Angular 2 - 链接 Web 服务调用答案

【问题标题】：Angular 2 - Chaining Web Service CallsAngular 2 - 链接 Web 服务调用
【发布时间】：2017-08-28 00:25:59
【问题描述】：

我正在尝试连续进行几个 Web 服务调用，但我遇到的问题是第二次调用将在 .subscribe 执行第一次调用之前进行。我需要发生 .subscribe 以设置 this.saveValue，因为 this.saveValue 在第二个 Web 服务调用的 JSON 中传递。

此代码当前发生的情况是，将进行第一次调用，然后进行第二次调用，然后再设置 saveValue。

组件.ts

busy: Subscription;
saveValue: string;

submitButton_Click():void{
    try{
        // First Web Service Call
        this.busy = this.service.firstMethod(this.object)
            .first()
            .subscribe(result => {
                if(result.length > 0){
                    this.saveValue= result; // VALUE SET FOR USE OF NEXT WEB SERVICE CALL
                    console.log('Worked');
                }
                else{
                    console.log('Failed');
                }     
            })



        for(let current of this.array){
            let temp= new Object();
            temp.id = this.saveValue;

            // Second Web Service Call
            this.busy = this.service.secondMethod(temp)
                .first()
                .subscribe(result => {
                    if(result.valueOf() != false){
                        console.log('Worked');
                    }
                    else{
                        console.log('Failed');
                    }          
                })
         }

服务.ts

// First Method
public firstMethod(object: Object): Observable<string>{
    return this.client.post<Result>(URL + '/add', object, new Result(), this.token.id)
        .map(result => {
            let temp = new Object().deserialize(result.data);
            return temp.id;
        }, this)
        .catch(this.handleError);
}  // This works and returns proper value

// Second Method (Needs this.saveValue as part of the passed object)
public secondMethod(object: Object): Observable<boolean> {
    return this.client.post<Result>(OTHERURL + '/add', object, new Result(), this.token.id)
        .map(result => result.success, this)
        .catch(this.handleError);
}

感谢您的帮助！

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

是的，因为您必须等待第一个完成。每当您进行异步调用时，都会愉快地继续执行下一段代码。试试这样：

this.busy = this.service.firstMethod(this.object)
            .first()
            .subscribe(result => {
                if(result.length > 0){
                    this.saveValue= result; // VALUE SET FOR USE OF NEXT WEB SERVICE CALL
                    console.log('Worked');

            for(let current of this.array){
            let temp= new Object();
            temp.id = this.saveValue;

            // Second Web Service Call
            this.busy = this.service.secondMethod(temp)
                .first()
                .subscribe(result => {
                    if(result.valueOf() != false){
                        console.log('Worked');
                    }
                    else{
                        console.log('Failed');
                    }          
                })
         }
                }
                else{
                    console.log('Failed');
                }     
            })

对不起，格式的垃圾；我没有方便的 WebStorm，没有它我很懒 :-)

【讨论】：

【解决方案2】：

可以使用Observable.flatMap 操作符来链接HTTP 请求。假设我们要发出两个请求，其中第二个请求取决于第一个请求的结果：

this.service.firstMethod(this.object)
    .flatMap(firstMethodResult => this.service.secondMethod(firstMethodResult))
    .subscribe(secondMethodResult => {
          console.log(secondMethodResult);
     });

这样，您可以链接尽可能多的相互依赖的请求。

如果（出于某种原因）您只想使用subscribe 方法，则需要在第一个请求的subscribe 回调中发出第二个请求：

this.service.firstMethod(this.object)
    .subscribe(firstMethodResult => {
        this.service.secondMethod(firstMethodResult))
            .subscribe(secondMethodResult => {
                console.log(secondMethodResult);
            });
    });

希望对您有所帮助！

【讨论】：