angular asynchronous request returns empty value-CodePudding

From ngOnchanges I called the method _generateLocationFormForApproval and it has an output which is this.absoluteUri. After calling _generateLocationFormForApproval the next call is _pageEventDealsForApprovalList. Now I want to access the result from _generateLocationFormForApproval whic is this.absoluteUri inside _pageEventDealsForApprovalList after its result but it is giving me undefined although this.absoluteUri has a value.

Why is this.absoluteUri undefined inside _pageEventDealsForApprovalList ?

Any idea ? with the asynchronous call ? Thansk.

#code

  ngOnChanges(changes: SimpleChanges): void {
      if(this.dealId) {
        this._generateLocationFormForApproval();
        this._pageEventDealsForApprovalList();
      }
    }
    
    
    
    private  _generateLocationFormForApproval() {
      this.dealService.generateLocationSubmission(this.dealId)
      .subscribe({
        next: (res) => {
          if (res.isSuccess) {
            this.absoluteUri = res.data.absoluteUri;
          }
        },
        error: err => this.notificationService.showError(err),
        complete: noop,
      });
    }
    
private _pageEventDealsForApprovalList() {
  console.log("1")
  console.log("this.absoluteUrithis.absoluteUri" , this.absoluteUri)
  this.searchInput = '';
  const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED]
  this.dealType = [];
  this.isLoading = true;
  this.dealService
    .getAllDeals(
      status,
      this.accountId,
      this.transaction.id,
      this.table.pageIndex   1,
      this.table.pageSize,
      this.searchInput,
      this.table.sortParams,
      this.table.sortDirs,
      this.dealType
    )
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe((res) => {
        if(res) {
          console.log("this.uri" , this.absoluteUri)
        }
    }, (err) => this.notificationService.showError(err)
  );
}

CodePudding user response：

Try to use Promise to call two API asynchronously.

Use this code

    ngOnChanges(changes: SimpleChanges): void {
      if(this.dealId) {
        this._generateLocationFormForApproval().then((data)=>{
        console.log(data)
        if(data)
          this._pageEventDealsForApprovalList();
        }
      }
    }
    
    
    
    private  _generateLocationFormForApproval() {
       return new Promise((resolve,reject)=>{
          this.dealService.generateLocationSubmission(this.dealId)
          .subscribe({
            next: (res) => {
              if (res.isSuccess) {
                this.absoluteUri = res.data.absoluteUri;
                resolve(this.absoluteUri);
              }
            },
            error: err => {
                  this.notificationService.showError(err);
                  reject(err)
            },
            complete: noop,
          });
      })
    }
    
private _pageEventDealsForApprovalList() {
  console.log("1")
  console.log("this.absoluteUrithis.absoluteUri" , this.absoluteUri)
  this.searchInput = '';
  const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED]
  this.dealType = [];
  this.isLoading = true;
  this.dealService
    .getAllDeals(
      status,
      this.accountId,
      this.transaction.id,
      this.table.pageIndex   1,
      this.table.pageSize,
      this.searchInput,
      this.table.sortParams,
      this.table.sortDirs,
      this.dealType
    )
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe((res) => {
        if(res) {
          console.log("this.uri" , this.absoluteUri)
        }
    }, (err) => this.notificationService.showError(err)
  );
}

CodePudding user response：

In this scenario I would recommend using the switchMap function from RxJs.

You would do something along the lines of this (warning: not tested):

ngOnChanges(changes: SimpleChanges): void {
  // It was originally this, but if you're looking for changes to the dealId you should use changes.dealId instead
  if (changes.dealId) {
    this.dealService.generateLocationSubmission(this.dealId)
      .pipe(
        switchMap(res => {
          if (!res.isSuccess) {
            return of(res);
          }
          this.absoluteUri = res.data.absoluteUri;
          return this._pageEventDealsForApprovalList(this.absoluteUri);
        }),
        finalize(() => (this.isLoading = false))
      )
      .subscribe(
        res => {
          if (res) {
            console.log('this.uri', this.absoluteUri);
          }
        },
        err => this.notificationService.showError(err)
      );
  }
}

private _pageEventDealsForApprovalList(absoluteUri): Observable<any> {
  console.log('1');
  console.log('this.absoluteUrithis.absoluteUri', this.absoluteUri);
  this.searchInput = '';
  const status = [DEAL.STATUS.FORAPPROVAL, DEAL.STATUS.APPROVED];
  this.dealType = [];
  this.isLoading = true;
  return this.dealService.getAllDeals(
    status,
    this.accountId,
    this.transaction.id,
    this.table.pageIndex   1,
    this.table.pageSize,
    this.searchInput,
    this.table.sortParams,
    this.table.sortDirs,
    this.dealType
  );
}