主页 / coding / 问题 / 79531059
Accepted
Zvi Vered
Asked: 2025-03-24 20:25:46 +0800 CST

Angular (2+)：同步调用 2 个方法

  • 772

在组件（或服务）中，我调用 Main 方法，该方法又调用另外 2 个私有方法。

export class MyService
{
    private Stage1 (N : number)
    {
      console.log ('-->Stage1');
      for (let i=0;i<N;i++)
      {
          //Send HTTP request
      }
      console.log ('<--Stage1');
    }
    
    private Stage2 (N: number)
    {
      console.log ('-->Stage2');
      for (let i=0;i<N;i++)
      {
           //Send HTTP request
      }
      console.log ('<--Stage2');
    }
    
    public Main ()
    {
        this.Stage1 (5);    
        this.Stage2 (7);
    }
}

问题：我希望仅在 Stage1 完成后才调用 Stage2。目标是获得以下输出：

-->Stage1
<--Stage1
-->Stage2
<--Stage2

您能否建议我应该在代码中添加什么内容？我尝试过：

async public Main ()
{
    await this.Stage1 ();    
    await this.Stage2 ();
}

但这一概念失败了。

谢谢你，Zvika

angular

3 个回答

  1. 有多种可能的解决方案。await关键字与承诺配合得很好，但我宁愿rxjs在 Angular 项目内部使用及其管道。

    基本上，您可以使用zip 运算符或merge 运算符，将所有 http 调用放入其中。

    如果您希望从Stage1内部获得响应Stage2，则可以使用switchMap 运算符pipe，但随后您需要将两个结果合并在一起。

    例子

    export class MyService
{
    private Stage1 ()
    {
      console.log ('-->Stage1');
      //Send dozens of HTTP requests
      console.log ('<--Stage1');
      return merge(httpCall1, httpCall2, ...)
    }
    
    private Stage2 ()
    {
      console.log ('-->Stage2');
      //Send dozens of HTTP requests
      console.log ('<--Stage2');
      return merge(httpCall1, httpCall2, ...)
    }
    
    public Main ()
    {
        return merge(this.Stage1(), this.stage2());
    }
}

class Component {

    ngOnInit() {
        MyService.Main().pipe(takeUntil(this.unsubscribe$)).subscribe(resp => what to do with responses)
    }

}

    使用时Observables不要忘记取消订阅可观察对象。即使只是冒泡一次的 http 调用也没关系。

    • 1

  2. 用于forkJoin并行执行 API，用于switchMap切换到执行相同操作的内部可观察对象。

    export class MyService {
    private Stage1 () {
      console.log ('-->Stage1');
      console.log ('<--Stage1');
      //Send dozens of HTTP requests
      return forkJoin([
        this.http.get('Stage1.1 url'),
        this.http.get('Stage1.2 url'),
      ]);
    }
    
    private Stage2 () {
      console.log ('-->Stage2');
      //Send dozens of HTTP requests
      console.log ('<--Stage2');
      //Send dozens of HTTP requests
      return forkJoin([
        this.http.get('Stage2.1 url'),
        this.http.get('Stage2.2 url'),
      ]);
    }
    
    // constructor {
    callApis() {
        return this.Stage1().pipe(
          switchMap(() => {
            return this.Stage1().pipe(
              switchMap(() => this.Stage2())
            )
          })
        );
    }
    // }
}

    构造函数中的代码在组件加载时初始化 API。

    一个更好的方法是定义一个方法，当组件调用该方法时，该方法就会被调用callApis。

    export class SomeComponent {
  private sub  = new Subscription(); destroy this when component is destroyed.

  constructor(private myService: MyService)  {
    this.sub.add(this.myService.callApis());
  }

  ngOnDestroy() {
    this.sub.unsubscribe(); // destroy the API fetch In flight of the component is destroyed.
  }
    • 1
  3. Best Answer

    您可以使用Promise并将它们放入承诺数组中，然后使用该Promise.all方法等待所有承诺完成

    export class MyService {
constructor(private http: HttpClient) {}

private async Stage1() {
    console.log('-->Stage1');
    await this.sendHttpRequests(); // Simulated async HTTP requests
    console.log('<--Stage1');
}

private async Stage2() {
    console.log('-->Stage2');
    await this.sendHttpRequests();
    console.log('<--Stage2');
}

public async Main() {
    await this.Stage1();
    await this.Stage2();
}

private async sendHttpRequests() {
    const requests = [
        this.http.get('https://api.example.com/data1').toPromise(),
        this.http.get('https://api.example.com/data2').toPromise(),
        this.http.get('https://api.example.com/data3').toPromise()
    ];
    await Promise.all(requests); // Wait for all HTTP calls to complete
}
}
    • 1

相关问题