面试题：Angular中如何使用RxJS实现简单的并发HTTP请求处理

Question

在Angular项目中，假设有两个HTTP请求，分别获取用户信息和用户的订单列表。请使用`HttpClient`和RxJS操作符实现这两个请求的并发处理，并在两个请求都完成后，将结果合并展示。请写出关键代码并解释用到的RxJS操作符的作用。

Answer 1

1. 关键代码：

   import { Component } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { combineLatest, map } from 'rxjs';
   
   @Component({
     selector: 'app - my - component',
     templateUrl: './my - component.html'
   })
   export class MyComponent {
     userInfo: any;
     orderList: any;
   
     constructor(private http: HttpClient) {
       const userInfo$ = this.http.get('/api/userInfo');
       const orderList$ = this.http.get('/api/orderList');
   
       combineLatest([userInfo$, orderList$])
        .pipe(
           map(([user, orders]) => {
             this.userInfo = user;
             this.orderList = orders;
             return { user, orders };
           })
         )
        .subscribe(result => {
           // 这里可以对合并后的结果进行进一步处理，比如传递给视图
           console.log(result);
         });
     }
   }
   

2. RxJS操作符作用解释：
   • combineLatest：
     • 作用：当传入的所有Observable（这里是userInfo$和orderList$）都至少发出一个值时，它会将这些Observable最近发出的值组合成一个数组，并将这个数组作为新的值发出。这使得我们可以在两个HTTP请求都完成后，获取到它们的结果并进行下一步处理。这里实现了两个请求的并发处理，并等待两个请求都完成。
   • map：
     • 作用：对combineLatest发出的数组进行转换。在这个例子中，将数组解构为user和orders，分别赋值给组件的userInfo和orderList属性，然后返回一个包含user和orders的对象。这个操作符用于对Observable发出的值进行转换和处理，使其符合我们后续使用的格式。