отменить подписку, чтобы загрузить наблюдаемый в угловых 6 остановка загрузки, но не фактическая загрузка

Question

при попытке отменить загрузку, отменив подписку о том, что на самом деле происходит, что я отписываюсь о прогрессе загрузки, но эта фактическая загрузка не отменяется и продолжает загрузку на сервер.upload.components.ts

import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
import { Subject, Subscription, Observable } from 'rxjs';
import { HttpEventType } from '@angular/common/http';
import { UploadService } from '../../../services';
import { takeUntil } from 'rxjs/operators';

 @Component({
 selector: 'app-image-upload-item',
  templateUrl: './image-upload-item.component.html',
  styleUrls: ['./image-upload-item.component.scss']
  })
 export class ImageUploadItemComponent implements OnInit, OnDestroy {
  @Input() index: any;
  @Output() uploadSuccess: EventEmitter<any>;
  @Output() uploadCanceled: EventEmitter<any>;
  public localimageURL: string;
  public uploadProgress: number;
  public isUploadCompleted: boolean;
  public uploadImageObservable: Subscription;
  public isReadyForUpload: boolean;
   public isUploading: boolean;
   public progressMode: string;
  public readonly unique: string = Math.floor((Math.random() * 
   100)).toString();
   public readonly imagePreviewID = 'imagePreview' + this.unique;


      _file: any;
     @Input() public set file(value: any) {
     const reader = new FileReader();
     reader.onload = (e: any) => {
      this.localimageURL = e.target.result;
    };
     this._file = value;
    reader.readAsDataURL(this._file);
    console.log(this._file);


     }
    constructor(private uploadService: UploadService) {
     this.uploadProgress = 0;
     this.isUploading = false;
     this.localimageURL = '';
      this.isUploadCompleted = false;
      this.uploadSuccess = new EventEmitter<any>();
      this.uploadCanceled = new EventEmitter<any>();
      this.progressMode = 'indeterminate';
       }

     ngOnInit() {
       this.uploadImageToServer(this._file);

      // setTimeout(() => {
      //   console.log('im in set time out unsubscripting', 
        this.uploadImageObservable);
      //    this.uploadImageObservable.forEach(subscription => {
     //     subscription.unsubscribe();
      //   });
   // }, 100);
   }

  ngOnDestroy() {
    console.log('component destroyed');
    this.uploadImageObservable.unsubscribe();
    }
    public clearUploadButtonClicked() {
    // if (this.uploadImageObservable !== undefined) {
   //   console.log('image observable is defined');
   //   this.uploadImageObservable.unsubscribe();
   //   console.log(this.uploadImageObservable.closed);
  // }
    // this.uploadImageObservable.unsubscribe();
   this._file = '';
    this.uploadCanceled.emit({ index: this.index, uploaded: false });
  }

   public get showUploadProgress(): boolean {
    return this.uploadProgress !== 0;
   }


   public uploadImageToServer(file) {
     this.isUploading = true;
    const progress = new Subject<number>();
     progress.subscribe(value => {
       this.uploadProgress = value;
     });

   this.uploadImageObservable = this.uploadService.uploadImage(file)
    .subscribe(result => {
      const type = result.type;
      const data = result.data;
      console.log(result);

       if (type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * data.loaded / data.total);
        progress.next(percentDone);
        if (percentDone === 100) {
          this.progressMode = 'indeterminate';
         }
        } else if (type === HttpEventType.Response) {
          if (data) {
            progress.complete();
           this.progressMode = 'determinate';
           this.isReadyForUpload = false;
           this.isUploadCompleted = true;
           this.isUploading = false;
            this.uploadSuccess.emit({ index: this.index, mediaItem: data });
          }

       }
     }, errorEvent => {
     });
  }

   }

upload.service.ts

  public uploadImage(imageFile: File): Observable<any> {
    const formData: FormData = new FormData();
     if (imageFile !== undefined) {
       formData.append('image', imageFile, imageFile.name);

      const req = new HttpRequest('POST', environment.uploadImageEndPoint, 
      formData, {
      reportProgress: true,
    });

   return new Observable<any>(observer => {
     this.httpClient.request<any>(req).subscribe(event => {
    if (event.type === HttpEventType.Response) {
      const responseBody = event.body;
      if (responseBody) {
        this.alertService.success(responseBody.message);
        observer.next({ type: event.type, data: new 
      MediaItem(responseBody.mediaItem) });
      }
    } else if (event.type === HttpEventType.UploadProgress) {
      observer.next({ type: event.type, data: { loaded: event.loaded, total: 
   event.total } });

    } else {
      observer.next(event);
    }
  }, errorEvent => {
    if (errorEvent.status === 400) {
      this.alertService.error(errorEvent.error['image']);
    } else {
      this.alertService.error('Server Error, Please try again later!');
    }
    observer.next(null);
    });
   });
  }
 }

как я могу правильно отменить запрос на загрузку с заметным примечанием отписаться, я уже пробовал pipe takeuntil () и ничего не изменилось

Answer 1

На самом деле я нашел способ следующим образом

public uploadImage(imageFile: File): Observable<any> {
const formData: FormData = new FormData();
if (imageFile !== undefined) {
  formData.append('image', imageFile, imageFile.name);

  const req = new HttpRequest('POST', environment.uploadImageEndPoint, formData, {
    reportProgress: true,
  });

  return this.httpClient.request<any>(req).pipe(
    map((res: any) => {
      return res;
    }),
    catchError(errorEvent => {
      if (errorEvent.status === 400) {
        this.alertService.error(errorEvent.error['image']);
      } else {
        this.alertService.error('Server Error, Please try again later!');
        return Observable.throw(errorEvent);
      }
      return Observable.throw(errorEvent);
    }));
}

}

Answer 2

То, что вы хотите сделать, это вернуть результат из функции канала в наблюдаемый HTTP-запрос возврата.Прямо сейчас у вас есть несколько потоков, и отмена подписки компонента - это только отмена подписки на наблюдаемую упаковку наблюдаемого http-запроса (не подключен).

Вы захотите сделать что-то вроде:

return this.httpClient.request<any>(req).pipe(
    // use rxjs operators here
);

Затем вы будете использовать операторы rxjs (я делал это некоторое время, но я все еще высоко ценю этот сайт) , чтобы выполнить любую необходимую логику и отразить такие вещи, как ваши ошибки и загрузить прогресс в вызов компонентасервис.Со стороны компонента вы сохраните логику подписки / отписки.

Например, вы можете использовать оператор switchMap для преобразования того, что возвращается компоненту, из наблюдаемого http-запроса иукажите значение, возвращаемое компоненту, и catchError , чтобы соответственно реагировать на любые ошибки.

return this.httpClient.request<any>(req).pipe(
    switchMap(event => {
        if (event.type === HttpEventType.Response) {
            const responseBody = event.body;
            if (responseBody) {
                this.alertService.success(responseBody.message);
                return { type: event.type, data: new MediaItem(responseBody.mediaItem) };
            }
        } else if (event.type === HttpEventType.UploadProgress) {
            return { type: event.type, data: { loaded: event.loaded, total: event.total } };
        }
        return event;
    }),
    catchError(errorEvent => {
        if (errorEvent.status === 400) {
            this.alertService.error(errorEvent.error['image']);
        } else {
            this.alertService.error('Server Error, Please try again later!');
        }
        return of(<falsy or error value>);
    }),
);

В качестве альтернативы вы можете смоделировать его немного позже после этот пример , просто возвращая вызов функции http из сервиса компоненту и обрабатывая там все, что есть в подписке.