等待 function 在 Angular 中完成

Question

我與 angular 7 合作。

我想在執行 rest 語句之前等待 function 完成。

在我的示例中，我想在執行 rest 語句之前等待saveAttach function：

 this.router.navigate(['/pages/sending']);

當我測試我的代碼時，頁面在saveAttach function 運行之前被轉發到發送頁面。

意思是這個聲明this.router.navigate(['/pages/sending']); 首先運行

然后this.dropzone.saveAttach(data.body[0].id); 在跑。

這是我的代碼：

  public sendTransfer() {
    try {
     
            this.correspService.sendCorresp(this.correspondence).subscribe(data => {

            this.dropzone.saveAttach(data.body[0].id);

            this.router.navigate(['/pages/sending']);
            
            });

        

    } catch (exception) {
      console.log('sendCorresp() function error : ' + exception);
    }
  }

在 dropzone 組件中，我有這個 function：

 public  saveAttach(id: string) {
    let latt: Attachement[] = new Array<Attachement>();
    this.dropzoneservice.getDoc({
      page: 0,
      uuid: localStorage.getItem('uuid'),
      sort: ['id']
    }).subscribe((res: HttpResponse<IDocTemp[]>) => {
      for (let i = 0; i < res.body.length; i++) {
        let att = new Attachement();
        att.idDoc = res.body[i].id.toString();
        att.filename = res.body[i].filenamedoc;
        att.id = id;
       
        latt.push(att)
      }
      this.dropzoneservice.addAtt(latt).subscribe(data => {
        console.log("save saveAttach : ", data.body);
        
      })

    });
  }

Answer 1

使用await或thenable方法：

this.dropzone.saveAttach(data.body[0].id)
  .then(() => {
     this.router.navigate(['/pages/sending']);
        
     });
  })


public saveAttach => async(id: string) {
  return new Promise(resolve => {
    let latt: Attachement[] = new Array<Attachement>();
    this.dropzoneservice.getDoc({
      page: 0,
      uuid: localStorage.getItem('uuid'),
      sort: ['id']
    }).subscribe((res: HttpResponse<IDocTemp[]>) => {
      for (let i = 0; i < res.body.length; i++) {
        let att = new Attachement();
        att.idDoc = res.body[i].id.toString();
        att.filename = res.body[i].filenamedoc;
        att.id = id;
       
        latt.push(att)
      }
      this.dropzoneservice.addAtt(latt).subscribe(data => {
        console.log("save saveAttach : ", data.body);
        resolve(); // <------------------
      })
    });
  })
}

Answer 2

你應該在你的saveAttach function 中返回一個 Observable。

import { Observable } from 'rxjs';
import { mergeMap, tap } from 'rxjs/operators';

public saveAttach(id: string): Observable<any> {
    let latt: Attachement[] = new Array<Attachement>();

    return this.dropzoneservice.getDoc({
        page: 0,
        uuid: localStorage.getItem('uuid'),
        sort: ['id']
    }).pipe(
        mergeMap(() => {
            for (let i = 0; i < res.body.length; i++) {
                let att = new Attachement();
                att.idDoc = res.body[i].id.toString();
                att.filename = res.body[i].filenamedoc;
                att.id = id;
                
                latt.push(att);
            }
            return this.dropzoneservice.addAtt(latt);
        }),
        tap((data) => {
            console.log("save saveAttach : ", data.body);
        })
    );
}

然后，在sendTransfer中，您可以 pipe 並一個接一個地執行異步 function 。

import { tap, mergeMap, catchError } from 'rxjs/operators';

public sendTransfer() {
    this.correspService.sendCorresp(this.correspondence).pipe(
        catchError((exception) => console.log('sendCorresp() function error : ' + exception)),
        mergeMap((data) => this.dropzone.saveAttach(data.body[0].id)),
        tap(() => this.router.navigate(['/pages/sending']))
    ).subscribe();
}