当Rxjs 6中有一个新的请求时,如何取消正在进行的HTTP请求?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (1308)

我在下面代码中使用了RxnsSearchServiceRxnsSearchHitCountService,我的应用程序中有两个HTTP服务。

forkJoin处理两个请求,代码:

constructor(
  private rxnsSearchService: RxnsSearchService,
  private rxnsSearchHitCountService: RxnsSearchHitCountService
) { }
const rxnsObservable: Observable<Array<any>> = this.rxnsSearchService.getReactions(this.searchParams, filters);
const headCountObservable: Observable<number> = this.rxnsSearchHitCountService.getHitCount(this.searchParams, filters);
forkJoin([rxnsObservable, headCountObservable]).pipe().subscribe((results) => { //handling results 
},
  error => {
    console.log(error);
  });

每当有新的请求出现时,我想取消正在进行的旧请求。有人能帮我吗?

export class RxnsSearchService {
  sub: Subject<any> = new Subject();
  constructor(private httpClient: HttpClient) {}

  getReactions(params: Params, offset: number, perPage: number, filters: any) {
    const body = {
      filters: filters,
      query: params.query
    };
     return this.httpClient.post(environment.rxnsSearch, body).pipe(
      map((response: Array<any>) => {
        return response;
      }),
      catchError(error => {
        console.log(error);
        return throwError(error);
      })
    );
  }
}

export class RxnsSearchHitCountService {
  constructor(private httpClient: HttpClient) {}

  getHitCount(params: Params, filters: any) {
    const body = {
      filters: filters,
      query: params.query,
    };
    return this.httpClient.post(environment.rxnsSearchHitCount, body).pipe(
      map((response: number) => {
        return response;
      }),
      catchError(error => {
        console.log(error);
        return throwError(error);
      })
    );
  }
}

提问于
用户回答回答于

我将通过一个简化的例子来介绍如何实现它的一般方法。假设我们目前有:

public getReactions() {
  this.http.get(…)
    .subscribe(reactions => this.reactions = reactions);
}

确保取消旧请求的方法是在某些主题上发出邮件:

private reactionsTrigger$ = new Subject<void>();

public getReactions() {
  this.reactionsTrigger$.next();
}

现在,我们有了一个可观察的表示触发新请求的事件流。你现在可以用OnInit实现:

public ngOnInit() {
  this.reactionsTrigger$.pipe(
    // Use this line if you want to load reactions once initially
    // Otherwise, just remove it
    startWith(undefined),

    // We switchMap the trigger stream to the request
    // Due to how switchMap works, if a previous request is still
    // running, it will be cancelled.
    switchMap(() => this.http.get(…)),

    // We have to remember to ensure that we'll unsubscribe from
    // this when the component is destroyed
    takeUntil(this.destroy$),
  ).subscribe(reactions => this.reactions = reactions);
}

// Just in case you're unfamiliar with it, this is how you create
// an observable for when the component is destroyed. This helps
// us to unsubscribe properly in the code above
private destroy$ = new Subject<void>();
public ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

这行:

    switchMap(() => this.http.get(…)),

在你的情况下,可能要切换事件到forkJoin:

    switchMap(() => forkJoin([rxnsObservable, headCountObservable])),

如果你希望单个事件流再次触发两个请求。

热门问答

怎样实现PDF文件在线浏览?

幻象丛林RESTful 服务开发者
推荐
一般浏览器自带pdf浏览,比如谷歌浏览器,你打开pdf结尾的文件就是浏览界面。 存放在cos中的pdf文件打开如果是直接下载的话,需要设置静态网站,才能正常访问存储桶中的文件,而不是直接下载。 开启静态网站配置后,您需要使用静态网站域名访问 COS 源站才能生效,如果使用 COS...... 展开详请

扩展能力之云调用,小程序端出错:[tcb-js-sdk]参数错误:非法的应用标识?

software微软、谷歌、腾讯、阿里、百度……
推荐
您好,appSign必须是小程序的appid,appSecret的两个字段必须是在云开发控制台-安全来源里配置过的。 image.png ... 展开详请

mysql 1h1g能带动多大的数据?

学生路人
推荐
您好,MySQL的处理速度主要看内存的缓存空间大小,缓存空间是否够用主要看业务热数据,而业务热数据是与业务访问相关的,腾讯云MySQL的存储引擎是固定的,都是innodb存储引擎,所以处理器这里不用考虑太多,主要关注innodb_buffer_pool_size是否够用,建议您先...... 展开详请

serverless db 如何管理?

Richel码农
推荐
1.支持pg_dump,psql工具进行数据导入和导出。 2.本地CLI,可以使用postgresql的客户端psql,也可以使用dbeavr,navicate,pgadmin等工具访问。 3.支持操作DB ,要自己写逻辑 ... 展开详请

安卓APP使用免费版加固后,在Android11系统上运行闪退,是什么原因?

hello,目前已经适配了Android R Beta1,预计这周内上线移动应用安全在线版,请留意日志更新

请问bugly上报的服务器是在哪?如果要发行海外版本,能把上报服务器调成海外吗?

所属标签

扫码关注云+社区

领取腾讯云代金券