如何从需要 Angular 2 中先前 API 请求的参数的 API 获取数据？答案

【问题标题】：How to get data from an API which requires parameters from a previous API request in Angular 2?如何从需要 Angular 2 中先前 API 请求的参数的 API 获取数据？
【发布时间】：2017-06-28 10:43:40
【问题描述】：

我正在编写一个链接到 API 的简单 Angular 2 应用程序。 API 有端点：

/job/:id

/client/:id

我希望我的应用程序显示一个包含以下数据的表格：

职位名称

职位描述

客户名称

客户电子邮件

我有一个简单的组件来显示这些信息

import {Component, OnInit} from '@angular/core'
import {JobService} from './job.service'

@Component({
    selector: 'job',
    template: `
    <table>
    <tr>
    <td>Job Name: {{job.name}}</td>
    <td>Job Description: {{job.description}}</td>
    <td>Client Name: {{client.name}}</td>
    <td>Client Email: {{client.email}}</td>
    </tr>
    </table>`,
    providers: [JobService]
})
export class JobComponent{
    job = {};
    client = {};


    constructor(private _jobService: JobService){}

    ngOnInit(){

        this._jobService.getJob(1)
            .subscribe(job => {
                this.job = job;
            });

        this._jobService.getClient(this.job.client_id)
            .subscribe(client => {
                this.client = client;
            });
    }
}

以及以下服务

import {Http} from '@angular/http'
import {Injectable} from '@angular/core'


@Injectable()
export class JobService {


    constructor(private _http: Http){
    }

    getJob(id){
        return this._http.get(window.__env.apiUrl + 'job/' + id + '/')
        .map(res => res.json());
    }

    getClient(id){
        return this._http.get(window.__env.apiUrl + 'client/' + id + '/')
        .map(res => res.json());
    }


}

这会将来自作业 API 调用的信息正确写入表，但由于两个 API 调用同时运行，因此返回客户端信息错误，因此系统尚未从作业 API 调用接收到 client_id .所以我想知道 Angular 在第一个 API 调用完成后进行第二个 API 调用的正确方法是什么。

为了参考，这里是错误：

例外：响应状态：404 未找到 URL：http://localhost:8080/au/api/client/undefined/

干杯

【问题讨论】：

标签： api angular rxjs observable

【解决方案1】：

在第一个调用中插入第二个调用。得到job后，执行第二个api调用

import {Component, OnInit} from '@angular/core'
import {JobService} from './job.service'

@Component({
    selector: 'job',
    template: `
    <table>
    <tr>
    <td>Job Name: {{job.name}}</td>
    <td>Job Description: {{job.description}}</td>
    <td>Client Name: {{client.name}}</td>
    <td>Client Email: {{client.email}}</td>
    </tr>
    </table>`,
    providers: [JobService]
})
export class JobComponent{
    job = {};
    client = {};


    constructor(private _jobService: JobService){}

    ngOnInit(){

        this._jobService.getJob(1)
            .subscribe(job => {
                this.job = job;

                this._jobService.getClient(this.job.client_id)
                    .subscribe(client => {
                       this.client = client;
                    });
            });


    }
}

【讨论】：

有没有办法用这个例子实现重试逻辑？例如，这些调用是在函数或表单中提交单击-第二次调用由于某种原因失败并且用户再次单击提交-您可以从第二次调用而不是从头开始吗？谢谢
没有这种情况，但您可以看到Observable.replay 重放呼叫的功能

【解决方案2】：

使用flatMap/mergeMap依次运行

ngOnInit(){

    this._jobService.getJob(1)
      .map(res => {
        this.job = job;
        return this.job.client_id;
      })
      .flatMap(client_id => this._jobService.getClient(client_id))
      .subscribe(client => {
          this.client = client;
      });
}

【讨论】：