Angular中如何将异步函数改为同步，等待getSchema执行完成

Hey there, let's tackle this async timing issue in your Angular code! The core problem here is that getElements() is executing before getSchema() finishes its HTTP request and populates this.resdata. Since Angular's HTTP calls are asynchronous, the subscribe callback in getSchema() only runs once the request completes—so your current setup tries to use this.resdata before it's actually been set.

Here are three solid solutions to fix this, depending on your use case:

Solution 1: Call getElements() Directly in the subscribe Callback (Simplest) #

This is the most straightforward fix—just move your getElements() call inside the subscribe block, so it only runs after this.resdata is fully populated:

getSchema() {
  this.getPdiSchema(this.ApplicationsComponent.selectedApplication)
    .subscribe((res: any) => {
      console.log("res:" + res);
      this.resdata = res;
      // Now we're guaranteed resdata is ready—call getElements here!
      this.getElements();
    }, (error) => {
      // Don't forget error handling!
      console.error("Failed to fetch schema:", error);
    });
}

getElements() {
  // Add a guard clause to avoid errors if resdata is missing
  if (!this.resdata) {
    console.warn("No schema data available to get elements");
    return;
  }

  let elements: any[];
  let complexType: any[];
  let sequence: any[];

  // Your existing logic to parse resdata
  complexType = this.resdata.complexType;
  sequence = complexType?.sequence;
  elements = sequence?.elements;

  // ... rest of your getElements logic
}

Solution 2: Use async/await for "Synchronous-Looking" Code #

If you prefer code that reads more like synchronous logic, convert getSchema() to an async function and use toPromise() (RxJS 6+ supports this):

async getSchema() {
  try {
    // Wait for the HTTP request to complete
    const res: any = await this.getPdiSchema(this.ApplicationsComponent.selectedApplication).toPromise();
    console.log("res:" + res);
    this.resdata = res;
    // Now call getElements
    this.getElements();
  } catch (error) {
    console.error("Failed to fetch schema:", error);
  }
}

getElements() {
  // Same guard clause as before
  if (!this.resdata) {
    console.warn("No schema data available to get elements");
    return;
  }

  let elements: any[];
  let complexType: any[];
  let sequence: any[];

  // Your existing parsing logic
  complexType = this.resdata.complexType;
  sequence = complexType?.sequence;
  elements = sequence?.elements;

  // ... rest of your getElements logic
}

Solution 3: Use RxJS Operators (For Reactive Workflows) #

If you're working with other RxJS streams or need getElements() to return an observable, use operators like switchMap to chain the asynchronous operations:

getSchemaAndElements() {
  this.getPdiSchema(this.ApplicationsComponent.selectedApplication)
    .pipe(
      // Switch to the next operation once the schema is fetched
      switchMap((res: any) => {
        console.log("res:" + res);
        this.resdata = res;
        // Return the result of getElements as an observable
        return of(this.getElements());
      })
    )
    .subscribe((elements) => {
      console.log("Fetched elements:", elements);
    }, (error) => {
      console.error("Failed to fetch schema/elements:", error);
    });
}

getElements(): any[] {
  if (!this.resdata) return [];

  let elements: any[];
  let complexType: any[];
  let sequence: any[];

  // Your existing parsing logic
  complexType = this.resdata.complexType;
  sequence = complexType?.sequence;
  elements = sequence?.elements;

  // Return the parsed elements
  return elements;
}

Key Notes: #

• Always add error handling (like the catch or error callback in subscribe) to avoid unhandled errors if the HTTP request fails.
• The guard clause in getElements() checks if this.resdata exists, preventing runtime errors even if something unexpected happens.

内容的提问来源于stack exchange，提问作者Divya Neelaiah