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

时间:2018-07-26 16:20:17

标签: angular http angular-http

  

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

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

  

我们的HttpService与HttpClient非常接近,并且具有类似的方法   例如GETPOST等。这里我们以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());
        });
    }
}

以下是网络屏幕截图: enter image description here

2 个答案:

答案 0 :(得分:2)

传递给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();
        };
    });
}

答案 1 :(得分:1)

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

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

        return response;
    }));
}}