How to wait other function finish with async

Question

I have 3 functions and I have to wait until function 1 is finished to start function 2 and wait for function 2 to finish to start 3 and ... in ngOnInit(). How can I do that ? I try with async but it doesn't work...

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();
  }
}

If you have any idea how to do this? It's on Ionic and Angular

Answer 1

I don't try but I think you have to write something like that:

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 and getCommerces are not async