Angular：HTTP请求后通过Observable实现点击排序且避免重复请求

核心思路是用BehaviorSubject缓存HTTP请求返回的数据，再将按钮点击事件转化为Observable，通过组合这两个流来实现"点击触发排序但不重复发请求"的需求，全程基于RxJS的流操作，无需手动维护数组变量。

具体实现步骤： #

1. 用BehaviorSubject缓存HTTP数据
   BehaviorSubject会保存最新的订阅值，第一次发起HTTP请求后，后续所有订阅都会直接使用缓存的数据，不会重复触发请求。

2. 将按钮点击转为Observable
   用fromEvent把按钮的点击事件包装成Observable，每次点击都会输出一个事件信号。

3. 组合流实现点击排序
   用withLatestFrom（更贴合需求）或combineLatest将点击事件流和缓存数据流组合，每次点击时取出最新缓存的数据执行排序逻辑。

代码示例（以Angular + RxJS为例）： #

import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, fromEvent, Observable } from 'rxjs';
import { map, switchMap, withLatestFrom } from 'rxjs/operators';

@Component({/* 组件配置 */})
export class YourComponent {
  // 用于缓存HTTP数据的BehaviorSubject
  private rawDataSubject = new BehaviorSubject<any[]>([]);
  // 最终供订阅的排序后数据Observable
  sortedData$: Observable<any[]>;

  constructor(private http: HttpClient) {
    // 发起一次HTTP请求，将结果存入Subject
    this.http.get<any[]>('你的API地址')
      .pipe(switchMap(data => {
        this.rawDataSubject.next(data);
        return this.rawDataSubject;
      }))
      .subscribe(); // 首次订阅触发HTTP请求

    // 把按钮点击转为Observable
    const sortClick$ = fromEvent(document.getElementById('sortBtn'), 'click');

    // 组合点击事件与缓存数据，实现点击排序
    this.sortedData$ = sortClick$.pipe(
      withLatestFrom(this.rawDataSubject),
      map(([_, rawData]) => {
        // 这里替换成你的排序逻辑，比如按name升序
        return [...rawData].sort((a, b) => a.name.localeCompare(b.name));
      })
    );
  }
}

关键细节说明： #

• BehaviorSubject初始化时可以传空数组，HTTP请求完成后会自动更新为真实数据。
• 排序时用[...rawData]拷贝原数组，避免修改缓存的原始数据，保证数据流的纯净性。
• withLatestFrom只会在点击事件触发时，取出当前缓存的最新数据执行排序，完全符合"点击才排序"的需求。

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