Как ждать, пока сервисный вызов завершит вызов, и после его успешного вызова снова вызовите ту же услугу в Angular 2

Question

Привет, у меня есть угловой проект с компонентом загрузки файла. Когда пользователь перетаскивает / выбирает файл, вызов службы запускает загрузку этого файла. Если есть какая-либо ошибка, тогда я показываю всплывающее окно с этой ошибкой.Проблема в том, что если пользователь выбирает или перетаскивает 5 файлов, у меня появляется 5 разных всплывающих окон.Так как же мне позвонить в 1-ю службу, затем дождаться завершения и загрузить следующий файл?Или какие-нибудь лучшие предложения, ребята?

• Вкл. Выберите или перетащите сервисный вызов

getFile(file) {
         file.map(obj => {
             if (!_.find(this.fileList, { fileName: obj.name })) {
                 this.fileList.push(obj);
                 obj.extension = obj.name.substring(obj.name.lastIndexOf('.') + 1);
                 if (_.includes(this.allowedExtensions, obj.extension)) {
                     this.UploadFile(this.fileList).subscribe((data: any) => {
                         if (data) {
                             if (data.response) {
                                 this.fileShowList.push(data.response);
                             }
                         }      
                    }, (error) => {
                        this.mdDialog.open(ErrorDialogComponent, {
                            'data': {
                                'type': 'error',
                                'title': `error `,
                                'content': `Error`
                            },
                            'disableClose': true
                        });
                    });
                } else {
                    let infoDialog = this.mdDialog.open(ErrorDialogComponent, {
                        'data': {
                            'type': 'error',
                            'title': `File type not allowed`,
                            'content': `File type not allowed`
                        },
                        'disableClose': true
                    });
                }
            } else {
                let infoDialog = this.mdDialog.open(ErrorDialogComponent, {
                    'data': {
                        'type': 'error',
                        'title': `You cant upload files with same name`,
                        'content': `You cant upload files with same name`
                    },
                    'disableClose': true
                });
            }
        });
    }

• Загрузите сервисный вызов:

  UploadFile(files: Array<any>) { let _self = this; const dataUrl = / Backend / uploadFile ; let fileObjectArray: Array<any> = []; return Observable.fromPromise(new Promise((resolve, reject) => { let formData: any = new FormData(), xhr = new XMLHttpRequest(); formData.append('applicationId', 's'); formData.append('token', 'ss'); formData.append('filename', files[0], files[0].name); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { _self.btnText = 'Upload files'; _self.uploadFile = false; let responseObj = JSON.parse(xhr.response); if (responseObj.status.code) { let dialogRef = _self.mdDialog.open(ErrorDialogComponent, { 'data': { 'type': 'error', 'title': responseObj.status.message, } }); dialogRef.afterClosed().subscribe((close: boolean) => { if (close) { _self.ngOnInit(); } }); } else { resolve(JSON.parse(xhr.response)); } resolve(JSON.parse(xhr.response)); } else { reject(xhr.response); } } }; xhr.open('POST', dataUrl, true); xhr.send(formData); })); }

Answer 1

Вы можете использовать оператор rxjs finalize ().https://www.learnrxjs.io/operators/utility/finalize.html

Вызов метода, когда наблюдаемое завершается или ошибки.

пример:

import { finalize } from 'rxjs/operators'; 
.
.
.
this.paymentMessage$ = this.creditCardService.payStorage(equipPayment)
.pipe( 
  finalize(() => { 
     //Call your service again 
  }) 
);