在Angular 7中,取消的HTTP请求在核心API中不会自动反映。但可以使用RxJS的Subject来实现取消HTTP请求的功能。下面是一个示例:
首先,创建一个名为HttpCancelService
的服务,用于处理取消HTTP请求的逻辑:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class HttpCancelService {
private cancelPendingRequests$ = new Subject();
get cancelPendingRequestsObservable() {
return this.cancelPendingRequests$.asObservable();
}
cancelPendingRequests() {
this.cancelPendingRequests$.next();
}
}
然后,在需要取消HTTP请求的组件中注入HttpCancelService
并使用takeUntil
操作符来取消请求:
import { Component, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { HttpCancelService } from './http-cancel.service';
@Component({
...
})
export class MyComponent implements OnDestroy {
private ngUnsubscribe = new Subject();
constructor(private http: HttpClient, private httpCancelService: HttpCancelService) {}
makeRequest() {
this.http.get('https://api.example.com/data')
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe(response => {
// 处理响应
});
}
cancelRequest() {
this.httpCancelService.cancelPendingRequests();
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}
在上面的代码中,HttpCancelService
中的cancelPendingRequests$
是一个Subject
,用于通知正在进行的HTTP请求取消。
MyComponent
组件中的makeRequest
方法使用takeUntil
操作符来获取ngUnsubscribe
的Observable,一旦ngUnsubscribe
发出值,HTTP请求将被取消。
cancelRequest
方法调用httpCancelService
中的cancelPendingRequests
方法来触发取消请求的操作。
注意,在组件销毁时,要调用ngOnDestroy
方法来取消订阅和清理资源。
这样,当调用cancelRequest
方法时,会触发HttpCancelService
中的cancelPendingRequests$
的next
方法,从而取消正在进行的HTTP请求。
上一篇:Angular 7起始页面位置
下一篇:Angular 7日期选择器时区