如何在 Angular 2 中发出 2 个依赖的 http 请求 [英] how to make 2 dependent http request in Angular 2

问题描述

我需要发出 2 个 http 请求(第二个依赖于第一个)以将用户凭据插入到我的数据库中.

i need to make 2 http request (the second dependent on the first) to insert user credentiels into my data base.

第一个服务获取用户凭证(http://localhost:55978/FleetViewDBWebService.asmx/ChekCreds?name=name1&subname=subname1) 并检查用户是否已经存在，如果存在则返回ID"，如果用户不存在则返回ok".

the first service get the user credentiels (http://localhost:55978/FleetViewDBWebService.asmx/ChekCreds?name=name1&subname=subname1) and check if the user already exist or not, return the 'ID' if it exist , or "ok" if the user doesn't exist.

然后我需要订阅第一个服务并获取返回值.如果ok"调用第二个服务(http://本地主机:55978/FleetViewDBWebService.asmx/InsertUser?name=name1&subname=subname1&Telephone=334580021)
插入用户凭据，否则返回任何消息.

then i need to subscribe to the first service and get the returned value. if "ok" call the second service (http://localhost:55978/FleetViewDBWebService.asmx/InsertUser?name=name1&subname=subname1&Telephone=334580021)
to insert the user credentiels , else return any message .

我调用了第一个服务并得到了结果，但我不知道如何添加第二个服务.

I call the first service and get the result but i have no idea how to add the second service.

有什么想法

CheckCreds(value: any) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    let params = new URLSearchParams();



    params.set('name', (value.nom).toString());
    params.set('subname', (value.prenom).toString());

    return this.http.get(this.checkUri, {
        search: params, withCredentials: true
    })
        .map(res => {
            console.log("++++" + res.text());


            return JSON.parse(res.text());
        })
        .catch(this.handleError)


} 

component.ts

 submitForm($ev, value: any) {
    $ev.preventDefault();
    for (let c in this.valForm.controls) {
        this.valForm.controls[c].markAsTouched();
    }
    if (this.valForm.valid) {
        this.Service.CheckCreds(value)
            .subscribe(
            res => {
                string result=JSON.stringify(res);
            },
            e => {
                alert(e);
            },
            () => {
            }

            );

    }
}

推荐答案

RxJS 的方式是使用 switchMap 操作符等待第一个请求的响应到达，然后触发第二个请求.

The RxJS way would be to use the switchMap operator to wait for the response of the first request to arrive before firing the second request.

return this.http.get('url/1')
  .switchMap(res1 => {
    // use res1 to further control param of the second call
    this.http.get('url/2')
  })
  .subscribe(res2 => {
    //do stuff with the second response
  })

<小时>

要并行处理请求(对于不相互依赖的请求)，请使用forkJoin 静态操作符.

---

To do the requests in parallel (for requests which are not dependant of one another), use the forkJoin static operator.

return Observable.forkJoin(
  this.http.get('url/1'),
  this.http.get('url/2'),
)
  .subscribe(([res1, res2]) => {
    // res1 and res2 available after both requests are completed
  })

这篇关于如何在 Angular 2 中发出 2 个依赖的 http 请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！