Question

我有两个并行的Web服务调用。有时，我的第一个服务呼叫呼叫第一个，有时呼叫第二个。我的第二个服务有一个功能，但是该功能需要我的第一个服务调用数据。

我尝试执行一个if语句，就像firstData存在一样，然后调用其他服务。但是没用

this.service.getFirstData(reqParams).then((data: any) => {
                        if (data.response) {
                            this.firstData = data.response;
                        }
                    }).catch(err => {
                            console.log(err);
                    });
this.service.getSecondData(data.user, this.itemselected).then((data: any) => {
                            if (data) {
                                this.listData = data.response.list;
                                this.calculateData();
                            }
                        }).catch((err: any) => {
                                console.log(err)
                        });

服务是异步的。我该如何处理这种奇怪的行为？预先感谢

Answer 1

如果您使用的是Angular，则可以利用RxJS的mergeMap来处理。

this.service.getFirstData(reqParams).pipe(
  mergeMap(res => { 
    // console.log(res)
    return this.service.getSecondData(res.user, this.itemselected)
  })
).subscribe(res => {
  // do the rest
});

Answer 2

您应该在第一个服务回调上调用第二个服务，因为第一个服务是异步的

   this.service.getFirstData(reqParams).then((data: any) => {
                            if (data.response) {
                                this.firstData = data.response;
//call your second service after the successful first service and then pass the data to the second service
                         this.service.getSecondData(data.user, 
                                     this.itemselected).then((data: any) => {
                                if (data) {
                                    this.listData = data.response.list;
                                    this.calculateData();
                                }
                            }).catch((err: any) => {
                                    console.log(err)
                            });
                          }
                        }).catch(err => {
                                console.log(err);
                        });

如果您想使用promise运行任何异步调用并行操作，如果它们不相互依赖，则可以尝试如下操作

Promise.all([promise1, promise2, promise3]).then(function(values) {
       console.log(values);
      //call if any other service after succesful execution of promise
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 3

对我们来说幸运的是，有一种优雅的方法可以在Angular 2/4中执行多个HTTP请求并等待所有请求完成。让我们为这种情况编写一个代码示例。我们需要的只是两个类。 REST服务，其中封装了HTTP请求方法和需要使用后端数据的组件。

import {Component, OnInit} from '@angular/core';
import {RestService} from "../rest.service";
@Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
    dataFromRequest1: any;  // data from url 1
    dataFromRequest2: any;  // data from url 2
    constructor(private restService: RestService) {
    }
    ngOnInit() {
        this.restService.getDataFromTwoResources().subscribe(responseList => {
            /*
            The response list is an array. In order to access data from each individual
            request, you need to use an index.
             */
            this.dataFromRequest1 = responseList[0];
            this.dataFromRequest2 = responseList[1];
        });
    }
}

注意：此技术可用于收集来自多个服务器或同一服务器的请求。您只需要知道资源的URL即可。

角度2：处理两个并行的Web服务调用

3 个答案: