如何完成get请求然后继续执行

Question

我的get request还没有完成，但代码的执行是连续的。因此，因变量没有被初始化。

我正在制作get request，如下

export class LoginComponent implements OnInit {
  constructor(public dialog: MatDialog,private objdataService: dataService) { }
  loginsAllRecords:any=[];
  
  //this is calling on button click
  onSubmit(form) {
    this.loadLogins();
    this.validate_user(form.value.name,form.value.password)
  }
  validate_user(username, pin)
  {
    var isEmail;
    var isPassword;
    //this is empty but after execution successfull console.log("data in load ", this.loginsAllRecords) returns data
    console.log(this.loginsAllRecords)
    var email = Object.values(this.loginsAllRecords).filter(x => x.email ==username)
    var password = Object.values(this.loginsAllRecords).filter(x => x.pin ==pin)
  }
  
  async loadLogins() {
     return await this.objdataService.getLogins_service().subscribe((data: {}) => {
      this.loginsAllRecords = data;
      console.log("data in load ", this.loginsAllRecords)
    })
  }
}

在上面的代码中，首先调用onSubmit，并初始化this.loginsAllRecords。然后在validate_user()中调用validate_user()而this.loginsAllRecords为空。程序执行完成后，this.loginsAllRecords获取值并将数据记录在控制台中。

这是服务级别

export class dataService {

  public httpOptions : any;
  loginsAllRecords:any=[];
  public loginUrl="http://localhost:3000/logins";
  constructor(private _http : HttpClient) {
    this.httpOptions = {
        headers: new HttpHeaders(
          { 
            'Content-Type': 'application/json; charset=utf-8',
          }) 
      }
  }
    getLogins_service(): Observable<login> {
    return this._http.get<login>(this.loginUrl)
    .pipe(
      retry(1),
      catchError(this.handleError)
    )
  }  
    // Error handling 
    handleError(error) {
      let errorMessage = '';
      if(error.error instanceof ErrorEvent) {
        // Get client-side error
        errorMessage = error.error.message;
      } else {
        // Get server-side error
        errorMessage = `Error Code: ${error.status}nMessage: ${error.message}`;
      }
      window.alert(errorMessage);
      return throwError(errorMessage);
   }
}

我该怎么解决这个问题？

Answer 1

尝试以下代码：

async/await与promise一起工作。只有当您正在等待的异步函数返回Promise(不可观察(时，它们才会起作用，因此订阅在这里不起作用。

async loadLogins() {
    const data= await this.objdataService.getLogins_service().toPromise();
    this.loginsAllRecords = data;
  }

另一种使用Observable的方法：

export class LoginComponent implements OnInit {
  constructor(public dialog: MatDialog,private objdataService: dataService) { }
  loginsAllRecords:any=[];
  
  //this is calling on button click
  onSubmit(form) {
    this.loadLogins(form);
    
  }
  validate_user(username, pin)
  {
    var isEmail;
    var isPassword;
    //this is empty but after execution successfull console.log("data in load ", this.loginsAllRecords) returns data
    console.log(this.loginsAllRecords)
    var email = Object.values(this.loginsAllRecords).filter(x => x.email ==username)
    var password = Object.values(this.loginsAllRecords).filter(x => x.pin ==pin)
  }
  
   loadLogins(form) {
     this.objdataService.getLogins_service().subscribe((data: {}) => {
      this.loginsAllRecords = data;
      this.validate_user(form.value.name,form.value.password)
      console.log("data in load ", this.loginsAllRecords)
    });
  }
}

Answer 2

CheckFinalize在rxjs运算符中返回一个Observable，该Observable镜像源Observable但在源完成或出错时终止时将调用指定的函数。

import { finalize } from 'rxjs/operators';

loadLogins() {
         return this.objdataService.getLogins_service().pipe(
            finalize(() =>  {
             console.log("Done");
             // write your code here
             })
            ).subscribe((data: {}) => {
          this.loginsAllRecords = data;
          console.log("data in load ", this.loginsAllRecords)
        })
      }

当源在完成或出现错误时终止时，将执行finalize中的代码。

Answer 3

如果你想在html部分简单地处理它，你可以在订阅部分中简单地使用boolean类型的变量，并在html部分中使用结构化指令。

示例：

public loadStuff: boolean = false;
return await this.objdataService.getLogins_service().subscribe((data: {}) => {
   this.loadStuff = true;
})

在HTML:中

<div *ngIf="loadStuff">
  ...
</div>