Angular 5：如何按顺序执行两次GET请求并在DataTable展示数据

搞定这个顺序问题其实很简单，核心就是利用RxJS的操作符来控制异步请求的执行顺序——毕竟Angular里的HTTP请求都是Observable，直接同步写肯定会出问题。我给你一步步拆解实现：

因为两个请求有明确的依赖关系（第二个请求需要第一个请求的结果），所以必须保证第一个请求完全完成、拿到数据后，再发起第二个请求。等两个请求都完成后，再合并数据渲染到DataTable里。RxJS的switchMap操作符正好能帮我们实现这个顺序控制。

1. 组件类逻辑（.ts文件） #

先导入必要的模块，定义存储数据的数组，然后在ngOnInit里发起顺序请求：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  // 存储两个请求返回的数据
  firstArray: any[] = [];
  secondArray: any[] = [];
  // 合并后供DataTable展示的数据
  displayData: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    // 第一步：发起第一个GET请求
    this.http.get<any[]>('你的第一个REST接口URL')
      .pipe(
        // 第一个请求完成后，用返回的数据发起第二个请求
        switchMap(firstData => {
          // 把第一个请求的数据存入数组
          this.firstArray = firstData;
          
          // 这里根据你的需求，用第一个数组的数据构造第二个请求的参数
          // 示例：提取第一个数组所有元素的id，拼接成查询参数
          const requestParams = {
            relatedIds: this.firstArray.map(item => item.id).join(',')
          };

          // 返回第二个GET请求的Observable
          return this.http.get<any[]>('你的第二个REST接口URL', { params: requestParams });
        })
      )
      .subscribe(secondData => {
        // 第二个请求完成，存入数组
        this.secondArray = secondData;
        // 合并两个数组的数据，适配DataTable的列结构
        this.mergeDisplayData();
        // 如果你的DataTable需要手动刷新，这里可以触发刷新逻辑
      });
  }

  // 合并两个数组的数据，生成DataTable需要的结构
  private mergeDisplayData(): void {
    // 这里假设两个数组的元素通过id关联，你可以根据实际关联逻辑调整
    this.displayData = this.firstArray.map(firstItem => {
      // 找到第一个元素对应的第二个数组元素
      const matchedSecondItem = this.secondArray.find(secondItem => secondItem.id === firstItem.id);
      return {
        // 第一个数组的列数据
        firstColumn: firstItem.name,
        firstDesc: firstItem.description,
        // 第二个数组的列数据（如果找不到匹配项，显示默认值）
        secondColumn: matchedSecondItem ? matchedSecondItem.status : '无数据',
        secondValue: matchedSecondItem ? matchedSecondItem.amount : 0
      };
    });
  }
}

2. 模板部分（.html文件） #

这里以常用的PrimeNG DataTable为例，你可以换成你正在使用的表格组件（比如Angular Material的MatTable）：

<!-- 确保你已经引入了对应表格组件的模块 -->
<p-dataTable [value]="displayData" [responsive]="true">
  <!-- 展示第一个数组的列 -->
  <p-column field="firstColumn" header="名称"></p-column>
  <p-column field="firstDesc" header="描述"></p-column>
  <!-- 展示第二个数组的列 -->
  <p-column field="secondColumn" header="状态"></p-column>
  <p-column field="secondValue" header="数值"></p-column>
</p-dataTable>

3. 模块配置 #

别忘了在你的模块（比如AppModule）里导入HttpClientModule，否则HTTP请求无法使用：

import { HttpClientModule } from '@angular/common/http';
import { YourComponentComponent } from './your-component/your-component.component';

@NgModule({
  declarations: [YourComponentComponent],
  imports: [
    // 其他模块...
    HttpClientModule
  ]
})
export class AppModule { }

• switchMap的作用：它会先订阅第一个HTTP请求的Observable，当第一个请求返回数据后，自动订阅第二个请求的Observable，完美保证了请求的顺序执行。
• 参数构造：示例里是把第一个数组的id拼接成查询参数，你可以根据后端接口的要求调整参数格式（比如POST请求的body参数）。
• 数据合并逻辑：mergeDisplayData里的匹配逻辑是按id一对一关联，如果你的数据是一对多或者其他关联方式，只需要修改这里的匹配逻辑即可。
• 异步安全：所有依赖两个数组数据的操作（比如合并、渲染）都要放在第二个请求的subscribe回调里，确保两个数组都已经拿到了数据。

内容的提问来源于stack exchange，提问作者neblaz