Question

更新：为什么您不能只使用或返回内置的HttpClient？因为我们必须拦截响应。

我们有一个HttpService，它包装了angular提供的HttpClient。它用于应用标头/授权以及对响应进行一些操作（...像拦截器一样-之所以走这条路，是因为拦截器当时不在Angular中）。

我们的HttpService与HttpClient非常接近，并且具有类似的方法例如GET，POST等。这里我们以GET为例。

我意识到，在退订方法的同时，real HttpClient 取消请求，而wrapped HttpService 不取消请求。 See this demo on Stackblitz

所以，我的问题是：如何在取消订阅时强制取消请求？还是我对Observable.create的实现是错误的（请参见下文）？

以下是关于GET的示例（实际代码做得更多）：

@Injectable()
export class HttpService {

    constructor(private http: HttpClient) {}

    public get<T>(url: string): Observable<any> {
        return Observable.create(observer => {
            this.http.get<T>(url).subscribe(
                response =>  {
                     // some other things
                     observer.next(response);
                 },
                error =>  observer.error(error),
                () =>  observer.complete());
        });
    }
}

以下是网络屏幕截图：

Answer 1

传递给create函数的函数应包括拆卸逻辑。请注意如何在its docs中声明它：

create(onSubscription: function(observer: Observer): TeardownLogic): Observable

相关的部分是TeardownLogic：

不带参数的函数。当创建的Observable调用的使用者取消订阅时，该函数将被调用

因此您的代码应更像这样：

public get<T>(url: string): Observable<any> {
    return Observable.create(observer => {
        let subs = this.http.get<T>(url).subscribe(
            response =>  {
                 // some other things
                 observer.next(response);
             },
            error =>  observer.error(error),
            () =>  observer.complete());

        return () => {
            // Your own tear down logic here and then:
            subs.unsubscribe();
        };
    });
}

Answer 2

默认情况下，httpclient返回一个可观察值，因此您无需创建一个。它也会自动将其取消。它应该看起来像这样：

public get<T>(url: string): Observable<T> {
    return this.http.get<T>(url).pipe(map(response => {
        // manipulate response here.

        return response;
    }));
}}

Angular不会在取消订阅时取消包装的HTTP请求

2 个答案: