Có cần thiết phải hủy đăng ký khỏi các đối tượng quan sát được tạo bởi các phương thức Http không?

Bạn có cần hủy đăng ký các cuộc gọi http Angular 2 để tránh rò rỉ bộ nhớ không?

 fetchFilm(index) {
        var sub = this._http.get(`http://example.com`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilm(json));
            })
            .subscribe(e=>sub.unsubscribe());
            ...

Vì vậy, câu trả lời là không, bạn không. Ng2sẽ tự làm sạch nó.

Nguồn dịch vụ Http, từ nguồn phụ trợ Http XHR của Angular:

Chú ý cách nó chạy complete()sau khi nhận được kết quả. Điều này có nghĩa là nó thực sự hủy đăng ký khi hoàn thành. Vì vậy, bạn không cần phải tự làm điều đó.

Đây là một bài kiểm tra để xác nhận:

  fetchFilms() {
    return (dispatch) => {
        dispatch(this.requestFilms());

        let observer = this._http.get(`${BASE_URL}`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilms(json.results));
                dispatch(this.receiveNumberOfFilms(json.count));
                console.log("2 isUnsubscribed",observer.isUnsubscribed);
                window.setTimeout(() => {
                  console.log("3 isUnsubscribed",observer.isUnsubscribed);
                },10);
            })
            .subscribe();
        console.log("1 isUnsubscribed",observer.isUnsubscribed);
    };
}

Như mong đợi, bạn có thể thấy rằng nó luôn tự động được hủy đăng ký sau khi nhận được kết quả và kết thúc với các toán tử có thể quan sát được. Điều này xảy ra vào khoảng thời gian chờ (# 3) để chúng tôi có thể kiểm tra trạng thái của thiết bị có thể quan sát được khi tất cả đã hoàn thành và hoàn thành.

Và kết quả

Vì vậy, sẽ không có rò rỉ nào tồn tại khi Ng2tự động hủy đăng ký!

Rất vui được đề cập: Điều này Observableđược phân loại là finite, trái ngược với infinite Observablenó là một luồng dữ liệu vô hạn có thể được phát ra như trình clicknghe DOM chẳng hạn.

CẢM ƠN, @rubyboy đã giúp đỡ về điều này.

Mọi người đang nói gì vậy !!!

OK vì vậy có hai lý do để hủy đăng ký khỏi bất kỳ điều gì có thể quan sát được. Dường như không ai nói nhiều về lý do thứ hai rất quan trọng!

1) Làm sạch tài nguyên. Như những người khác đã nói đây là một vấn đề không đáng kể đối với các thiết bị quan sát HTTP. Nó sẽ tự dọn dẹp.

2) Ngăn subscribetrình xử lý chạy.

(Đối với HTTP, điều này thực sự cũng sẽ hủy yêu cầu trong trình duyệt - vì vậy sẽ không lãng phí thời gian đọc phản hồi. Nhưng đó thực sự là một điều không quan trọng đối với điểm chính của tôi bên dưới.)

Mức độ liên quan của số 2 sẽ phụ thuộc vào những gì trình xử lý đăng ký của bạn làm:

Nếu subscribe()hàm xử lý của bạn có bất kỳ loại tác dụng phụ nào không mong muốn nếu bất kỳ điều gì gọi nó bị đóng hoặc bị loại bỏ thì bạn phải hủy đăng ký (hoặc thêm logic có điều kiện) để ngăn nó được thực thi.

Hãy xem xét một số trường hợp:

1) Một biểu mẫu đăng nhập. Bạn nhập tên người dùng và mật khẩu và nhấp vào 'Đăng nhập'. Điều gì sẽ xảy ra nếu máy chủ chạy chậm và bạn quyết định nhấn Escape để đóng hộp thoại? Có thể bạn sẽ cho rằng mình chưa đăng nhập, nhưng nếu yêu cầu http trả về sau khi bạn nhấn thoát thì bạn vẫn sẽ thực thi bất kỳ logic nào bạn có ở đó. Điều này có thể dẫn đến chuyển hướng đến trang tài khoản, cookie đăng nhập không mong muốn hoặc biến mã thông báo được đặt. Đây có lẽ không phải là những gì người dùng của bạn mong đợi.

2) Một biểu mẫu 'gửi email'.

Nếu subscribetrình xử lý cho 'sendEmail' làm điều gì đó như kích hoạt hoạt ảnh 'Email của bạn đã được gửi', hãy chuyển bạn sang một trang khác hoặc cố gắng truy cập bất kỳ thứ gì đã được xử lý, bạn có thể nhận được ngoại lệ hoặc hành vi không mong muốn.

Cũng hãy cẩn thận để không cho rằng unsubscribe()có nghĩa là 'hủy bỏ'. Sau khi thông báo HTTP đang bay unsubscribe()sẽ KHÔNG hủy yêu cầu HTTP nếu nó đã đến máy chủ của bạn. Nó sẽ chỉ hủy bỏ phản hồi gửi lại cho bạn. Và email có thể sẽ được gửi.

Nếu bạn tạo đăng ký để gửi email trực tiếp bên trong một thành phần UI thì có thể bạn sẽ muốn hủy đăng ký khi loại bỏ, nhưng nếu email đang được gửi bởi một dịch vụ tập trung không phải UI thì bạn có thể không cần.

3) Một thành phần Angular bị hủy / đóng. Mọi vật quan sát http vẫn đang chạy tại thời điểm đó sẽ hoàn thành và chạy logic của chúng trừ khi bạn hủy đăng ký onDestroy(). Hậu quả có nhỏ nhặt hay không sẽ phụ thuộc vào những gì bạn làm trong trình xử lý đăng ký. Nếu bạn cố gắng cập nhật thứ gì đó không tồn tại nữa, bạn có thể gặp lỗi.

Đôi khi bạn có thể có một số hành động bạn muốn nếu thành phần được xử lý và một số thì không. Ví dụ: có thể bạn có âm thanh 'swoosh' cho một email đã gửi. Bạn có thể muốn điều này phát ngay cả khi thành phần đã bị đóng, nhưng nếu bạn cố gắng chạy hoạt ảnh trên thành phần đó, nó sẽ không thành công. Trong trường hợp đó, một số logic có điều kiện bổ sung bên trong đăng ký sẽ là giải pháp - và bạn KHÔNG muốn hủy đăng ký http có thể quan sát được.

Vì vậy, để trả lời cho câu hỏi thực tế, bạn không cần phải làm điều đó để tránh rò rỉ bộ nhớ. Nhưng bạn cần phải làm điều đó (thường xuyên) để tránh các tác dụng phụ không mong muốn được kích hoạt khi chạy mã có thể tạo ra các ngoại lệ hoặc làm hỏng trạng thái ứng dụng của bạn.

Mẹo: Hộp Subscriptionchứa thuộc tính closedboolean có thể hữu ích trong các trường hợp nâng cao. Đối với HTTP, điều này sẽ được đặt khi nó hoàn tất. Trong Angular, nó có thể hữu ích trong một số trường hợp để thiết lập một _isDestroyedthuộc tính ngDestroymà subscribetrình xử lý của bạn có thể kiểm tra .

Mẹo 2: Nếu xử lý nhiều đăng ký, bạn có thể tạo một new Subscription()đối tượng đặc biệt và add(...)bất kỳ đăng ký nào khác đối với nó - vì vậy khi bạn hủy đăng ký khỏi đối tượng chính, nó cũng sẽ hủy đăng ký tất cả các đăng ký đã thêm.

Hủy đăng ký là PHẢI nếu bạn muốn có một hành vi xác định trên tất cả các tốc độ mạng.

Hãy tưởng tượng rằng thành phần A được hiển thị trong một tab - Bạn nhấp vào nút để gửi yêu cầu 'GET'. Phải mất 200 ms để phản hồi trở lại. Vì vậy, bạn có thể an tâm đóng tab bất cứ lúc nào khi biết rằng, máy sẽ nhanh hơn bạn và phản hồi http được xử lý và hoàn tất trước khi đóng tab và thành phần A bị phá hủy.

Làm thế nào về một mạng rất chậm? Bạn nhấp vào một nút, yêu cầu 'GET' mất 10 giây để nhận được phản hồi của nó, nhưng sau 5 giây chờ đợi, bạn quyết định đóng tab. Điều đó sẽ phá hủy thành phần A được thu gom rác sau đó. Đợi tí! , chúng tôi đã không hủy đăng ký - bây giờ 5 giây sau, một phản hồi sẽ quay lại và logic trong thành phần bị hủy sẽ được thực thi. Việc thực thi đó hiện đã được xem xét out-of-contextvà có thể dẫn đến nhiều thứ, bao gồm cả hiệu suất rất thấp.

Vì vậy, cách tốt nhất là sử dụng takeUntil()và hủy đăng ký các cuộc gọi http khi thành phần bị hủy.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

interface User {
  id: string;
  name: string;
  age: number;
}

@Component({
  selector: 'app-foobar',
  templateUrl: './foobar.component.html',
  styleUrls: ['./foobar.component.scss'],
})
export class FoobarComponent implements OnInit, OnDestroy {
  private user: User = null;
  private destroy$ = new Subject();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http
      .get<User>('api/user/id')
      .pipe(takeUntil(this.destroy$))
      .subscribe(user => {
        this.user = user;
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();  // trigger the unsubscribe
    this.destroy$.complete(); // finalize & clean up the subject stream
  }
}

Gọi unsubscribephương thức đúng hơn là để hủy một yêu cầu HTTP đang thực hiện vì phương thức này gọi abortmột yêu cầu trên đối tượng XHR bên dưới và loại bỏ trình nghe trên các sự kiện tải và lỗi:

// From the XHRConnection class
return () => {
  _xhr.removeEventListener('load', onLoad);
  _xhr.removeEventListener('error', onError);
  _xhr.abort();
};

Điều đó nói rằng, unsubscribeloại bỏ người nghe ... Vì vậy, nó có thể là một ý tưởng hay nhưng tôi không nghĩ rằng nó cần thiết cho một yêu cầu duy nhất ;-)

Hy vọng nó sẽ giúp bạn, Thierry

Ngoài ra với mô-đun HttpClient mới, vẫn giữ nguyên hành vi

Sau một thời gian thử nghiệm, đọc tài liệu và mã nguồn của HttpClient.

HttpClient: https://github.com/angular/angular/blob/master/packages/common/http/src/client.ts

HttpXhrBackend : https://github.com/angular/angular/blob/master/packages/common/http/src/xhr.ts

HttpClientModule: https://indepth.dev/exploring-the-httpclientmodule-in-angular/

Angular Univeristy: https://blog.angular-university.io/angular-http/

Loại Quan sát cụ thể này là các luồng đơn giá trị: Nếu yêu cầu HTTP thành công, các có thể quan sát này sẽ chỉ phát ra một giá trị và sau đó hoàn thành

Và câu trả lời cho toàn bộ Vấn đề "TÔI CÓ CẦN" hủy đăng ký không?

Nó phụ thuộc. Cuộc gọi Http Bộ nhớ không phải là một vấn đề. Các vấn đề là logic trong các hàm gọi lại của bạn.

Ví dụ: Định tuyến hoặc Đăng nhập.

Nếu cuộc gọi của bạn là cuộc gọi đăng nhập, bạn không cần phải "hủy đăng ký" nhưng bạn cần đảm bảo rằng nếu Người dùng rời khỏi trang, bạn xử lý phản hồi đúng cách trong trường hợp không có người dùng.

this.authorisationService
      .authorize(data.username, data.password)
      .subscribe((res: HttpResponse<object>) => {
          this.handleLoginResponse(res);
        },
        (error: HttpErrorResponse) => {
          this.messageService.error('Authentication failed');
        },
        () => {
          this.messageService.info('Login has completed');
        })

Từ khó chịu đến nguy hiểm

Bây giờ chỉ cần tưởng tượng, mạng chậm hơn bình thường, cuộc gọi kéo dài hơn 5 giây và người dùng rời khỏi chế độ xem đăng nhập và chuyển sang chế độ "hỗ trợ".

Thành phần có thể không hoạt động nhưng đăng ký. Trong trường hợp có phản hồi, người dùng sẽ đột ngột được định tuyến lại (tùy thuộc vào việc triển khai handleResponse () của bạn).

Điều này là không tốt.

Cũng chỉ cần tưởng tượng người dùng rời khỏi máy tính, tin rằng anh ta chưa đăng nhập. Nhưng bạn logic đăng nhập người dùng, bây giờ bạn có một vấn đề bảo mật.

Bạn có thể làm gì mà không cần hủy đăng ký?

Làm cho bạn gọi phụ thuộc vào trạng thái hiện tại của chế độ xem:

  public isActive = false;
  public ngOnInit(): void {
    this.isActive = true;
  }

  public ngOnDestroy(): void {
    this.isActive = false;
  }

Người dùng .pipe(takeWhile(value => this.isActive))để đảm bảo phản hồi chỉ được xử lý khi chế độ xem đang hoạt động.

this.authorisationService
      .authorize(data.username, data.password).pipe(takeWhile(value => this.isActive))
      .subscribe((res: HttpResponse<object>) => {
          this.handleLoginResponse(res);
        },
        (error: HttpErrorResponse) => {
          this.messageService.error('Authentication failed');
        },
        () => {
          this.messageService.info('Login has completed');
        })

Nhưng làm thế nào bạn có thể chắc chắn rằng đăng ký không gây ra lỗi bộ nhớ?

Bạn có thể ghi nhật ký nếu "teardownLogic" được áp dụng.

TeardownLogic của một đăng ký sẽ được gọi khi đăng ký đó trống hoặc chưa được đăng ký.

this.authorisationService
      .authorize(data.username, data.password).pipe(takeWhile(value => this.isActive))
      .subscribe((res: HttpResponse<object>) => {
          this.handleLoginResponse(res);
        },
        (error: HttpErrorResponse) => {
          this.messageService.error('Authentication failed');
        },
        () => {
          this.messageService.info('Login has completed');
    }).add(() => {
        // this is the teardown function
        // will be called in the end
      this.messageService.info('Teardown');
    });

Bạn không cần phải hủy đăng ký. Bạn nên biết nếu có vấn đề trong logic của bạn, điều đó có thể gây ra Sự cố trong đăng ký của bạn. Và chăm sóc chúng. Trong hầu hết các trường hợp, nó sẽ không phải là vấn đề, nhưng đặc biệt là ở các nhiệm vụ quan trọng như tự động hóa, bạn nên quan tâm đến hành vi không mong muốn, làm ướt nó bằng "hủy đăng ký" hoặc một logic khác như đường ống hoặc chức năng gọi lại có điều kiện.

tại sao không luôn luôn hủy đăng ký?

Hãy tưởng tượng bạn thực hiện một yêu cầu đặt hoặc đăng. Máy chủ nhận tin nhắn theo cả hai cách, chỉ mất một lúc để phản hồi. Hủy đăng ký, sẽ không hoàn tác bài đăng hoặc đặt. Nhưng khi bạn hủy đăng ký, bạn sẽ không có cơ hội xử lý phản hồi hoặc thông báo cho Người dùng, ví dụ qua Hộp thoại hoặc Bánh mì nướng / Tin nhắn, v.v.

Wich khiến Người dùng tin rằng yêu cầu đặt / đăng không được thực hiện.

Vì vậy, nó phụ thuộc. Đó là quyết định thiết kế của bạn, làm thế nào để giải quyết các vấn đề như vậy.

Bạn không nên hủy đăng ký khỏi các phần tử quan sát tự động hoàn thành (ví dụ: Http, cuộc gọi). Nhưng cần phải hủy đăng ký khỏi các vật thể quan sát vô hạn như Observable.timer().

Bạn chắc chắn nên đọc này bài viết. Nó cho bạn thấy lý do tại sao bạn nên hủy đăng ký ngay cả từ http .

Nếu sau khi tạo yêu cầu nhưng trước khi nhận được câu trả lời từ back-end, bạn cho rằng thành phần không cần thiết và phá hủy nó, đăng ký của bạn sẽ duy trì tham chiếu đến thành phần, do đó tạo cơ hội gây rò rỉ bộ nhớ.

Cập nhật

Khẳng định ở trên có vẻ đúng, nhưng dù sao, khi có câu trả lời thì đăng ký http vẫn bị hủy.