Question

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

此代码目前发生的事情是第一次调用，然后进行第二次调用，然后在此之后设置saveValue。

Component.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');
                    }          
                })
         }

Service.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);
}

感谢您的帮助！

Answer 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方便，没有它我就懒得了： - ）

Answer 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);
            });
    });

希望它有所帮助！

Angular 2 - 链接Web服务调用

2 个答案: