如何通过异步等待其他功能完成

Question

我有3个功能，我必须等到功能1完成才能启动功能2，然后等到功能2完成才能启动ngOnInit()中的3和...。我怎样才能做到这一点 ？我尝试使用异步，但是它不起作用...

1. nbPage()
2. getAllCommerces(page)
3. sort()
4. getCommerces(isFirstLoad, event)

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GeolocationService } from '../services/geolocation.service';

@Component({
  selector: 'app-commerces',
  templateUrl: './commerces.page.html',
  styleUrls: ['./commerces.page.scss'],
})
export class CommercesPage implements OnInit {

  itemListData = [];
  commerces = [];
  nbCommerce = 10;


  constructor(
    private httpClient: HttpClient,
    private geolocationService: GeolocationService
  ) {
  }

  async ngOnInit() {
    await this.getAllCommerces(await this.nbPage());
    await this.getCommerces(false, "");
  }


  async getCommerces(isFirstLoad, event) {

    var tmp = [];
    for (let i = 0; i < 10; i++) {
      tmp.push(this.itemListData[i]);
    }
    this.nbCommerce = + 10
    if (isFirstLoad) {
      event.target.complete();
    }

    this.commerces = tmp;
  }

  doInfinite(event) {
    this.getCommerces(true, event);
  }

  async sort() {
    this.itemListData.sort(function (a, b) {
      if (a.title.rendered > b.title.rendered)
        return 1;
      if (a.title.rendered < b.title.rendered)
        return -1;
      else
        return 0;
    });
  }

  onSearchChange(event) {
    console.log(event.detail.value);
  }


  async nbPage() {
    const t = this.httpClient
      .get('https://exemple.fr/wp-json/wp/v2/listing', { observe: 'response' }).toPromise();

    return (await t).headers.get('X-WP-TotalPages');
  }

  async getAllCommerces(pages) {
    for (let j = 1; j <= pages; j++) {
      this.httpClient
        .get('https://exemple.fr/wp-json/wp/v2/listing?page=' + j, { observe: 'response' })
        .subscribe((data: any) => {
          for (let i = 0; i < data.body.length; i++) {
            data.body[i].location = this.geolocationService.getDistance(data.body[i]._geolocation_lat, data.body[i]._geolocation_long).toFixed(2);;
            data.body[i]._gallery = data.body[i]._gallery[Object.keys(data.body[i]._gallery)[0]]
            this.itemListData.push(data.body[i]);
          }

        })
    }
    await this.sort();
  }
}

如果您有任何想法怎么做？在离子和角度上

Answer 1

我不尝试，但是我认为你必须写这样的东西：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GeolocationService } from '../services/geolocation.service';

@Component({
  selector: 'app-commerces',
  templateUrl: './commerces.page.html',
  styleUrls: ['./commerces.page.scss'],
})
export class CommercesPage implements OnInit {

  itemListData = [];
  commerces = [];
  nbCommerce = 10;


  constructor(
    private httpClient: HttpClient,
    private geolocationService: GeolocationService
  ) {
  }


async ngOnInit(){
    this.nbPages = await this.nbPage();
    await this.getAllCommerces(this.nbPages);
    this.getCommerces(false, null);
}


  getCommerces(isFirstLoad, event) {

    var tmp = [];
    for (let i = 0; i < 10; i++) {
      tmp.push(this.itemListData[i]);
    }
    this.nbCommerce = + 10
    if (isFirstLoad) {
      event && event.target.complete();
    }

    this.commerces = tmp;
  }

  doInfinite(event) {
    this.getCommerces(true, event);
  }

  sort() {
    this.itemListData.sort(function (a, b) {
      if (a.title.rendered > b.title.rendered)
        return 1;
      if (a.title.rendered < b.title.rendered)
        return -1;
      else
        return 0;
    });
  }

  onSearchChange(event) {
    console.log(event.detail.value);
  }



async nbPage() : Promise<number>
 {
    const t = await this.httpClient
      .get('https://example.fr/wp-json/wp/v2/listing', {observe: 'response'})
      .toPromise();
      const pages = <number>parseInt(t.headers.get('X-WP-TotalPages'));
    return pages;
  }

      async getAllCommerces(pages) {
        let commerces = [];
        for (let j = 1; j <= pages; j++) {
          const response = await this.httpClient
            .get('https://exemple.fr/wp-json/wp/v2/listing?page=' + j, { observe: 'response' }).toPromise()
          for (let i = 0; i < Object.keys(response.body).length; i++) {
                response.body[i].location = await this.geolocationService.getDistance(response.body[i]._geolocation_lat, response.body[i]._geolocation_long).toFixed(2);;
                response.body[i]._gallery = response.body[i]._gallery[Object.keys(response.body[i]._gallery)[0]]
                this.itemListData.push(response.body[i]);
          }
        }
        this.sort();
      }
}

sort和getCommerces不同步