Угловая асинхронная работа не работает с Http.get

Question

У меня есть фрагмент кода, который делает http-запрос для получения геолокации клиентов, а затем отправляет его в мой API, используя http.get в качестве параметра, я сделал оба правильно, но я застрял с созданием асинхронных функций, я Я хочу получить geoLocation, и когда он закончится, и я получу его, я хочу сделать запрос к своему API, я перепробовал много уроков и подобных вопросов по переполнению стека, но я не могу понять это правильно, может кто-то посоветовать, что не так с мой код?

Вот код:

@Injectable()

export class ProductsService {

  public currency: string = '';
  public catalogMode: boolean = false;

  public compareProducts: BehaviorSubject<Product[]> = new BehaviorSubject([]);
  public observer: Subscriber<{}>;
  public static productList$: Observable<Product[]> = new Observable;
  public static test: boolean = false;

  public ipAddress: string;
  public country: string;

  // Initialize 
  constructor(private http: Http, private toastrService: ToastrService) {
    this.getIp();
    this.compareProducts.subscribe(products => products = products);
  }

  // Observable Product Array
  private products(): Observable<Product[]> {

    ProductsService.productList$.subscribe(p => {
      if (p.length != 0) {
        ProductsService.test = true;
      }
    });

    if (!ProductsService.test) {
      this.currency = this.getCurrency(this.country); //prints counrty = undefined currency = USD
      console.log('currency 1 = ' + this.currency); // prints defualt currency USD?
      ProductsService.productList$ = this.http.get('http://localhost:8080/products/getAllProducts?currency='+this.currency).map((res: any) => {
        ProductsService.test = true;
        this.currency = this.getCurrency(this.country);  // calling the function here works as I want
        console.log('currency 2 = ' + this.currency); // prints the expected values
        return res.json();
      });

    }
    return ProductsService.productList$;
  }

  // Get Products
  public getProducts(): Observable<Product[]> {
    return this.products();
  }

  async getIp() {
    await this.http.get(('http://ip-api.com/json/' + '?fields=countryCode')).toPromise().then(r => {
      this.country = r.json().countryCode;
    });
  }

  private getCurrency(country: string): string {
    if (country === 'JO') {
      this.currency = 'JOD';
    } else if (country === 'AE') {
      this.currency = 'AED';
    } else if (country === 'SA') {
      this.currency = 'SAR';
    } else if (country === 'GB') {
      this.currency = 'GBP';
    } else if (country === 'DE') {
      this.currency = 'EUR';
    } else if (country === 'KW') {
      this.currency = 'KWD';
    } else if (country === 'EG') {
      this.currency = 'EGP';
    } else {
      this.currency = 'USD';
    }
    console.log("counrty = " + country + " currency = " + this.currency); //prints counrty = GB currency = GBP
    return this.currency;
  }

}

При запуске кода консоль выдаст:

counrty = undefined currency = USD
currency 1 = USD
counrty = GB currency = GBP
currency 2 = GBP
counrty = GB currency = GBP
currency 2 = GBP

Answer 1

Async / Await на самом деле не работает так. Вы должны присвоить обещание переменной, что-то вроде этого:

async getIp() {
  const resposne = await this.http.get('http://ip-api.com/json/' + '?fields=countryCode').toPromise();
 ..... do stuff with your response ....
  }

Answer 2

Вы можете позвонить await this.getIp() в getProducts(), чтобы дождаться его завершения.

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProductsServiceService {

  private products: Product[];

  // Initialize
  constructor(private http: HttpClient) {
  }

  // Get Products
  public getProducts(): Observable<Product[]> {
    if (this.products) {
      return of(this.products);
    } else {
      return this.getIp().pipe(
        switchMap(country => {
          const currency = this.getCurrency(country);
          console.log('currency 1 = ' + currency);
          return this.http.get('http://localhost:8080/products/getAllProducts?currency=' + currency).pipe(
            map((res: any) => {
              console.log('currency 2 = ' + currency); // prints the expected values
              return res.json();
            })
          );
        })
      );
    }
  }

  getIp() {
    return this.http.get<any>(('http://ip-api.com/json/' + '?fields=countryCode')).pipe(
      map(r => r.json().countryCode)
    );
  }

  private getCurrency(country: string): string {
    let currency;

    if (country === 'JO') {
      currency = 'JOD';
    } else if (country === 'AE') {
      currency = 'AED';
    } else if (country === 'SA') {
      currency = 'SAR';
    } else if (country === 'GB') {
      currency = 'GBP';
    } else if (country === 'DE') {
      currency = 'EUR';
    } else if (country === 'KW') {
      currency = 'KWD';
    } else if (country === 'EG') {
      currency = 'EGP';
    } else {
      currency = 'USD';
    }
    console.log('counrty = ' + country + ' currency = ' + currency);
    return currency;
  }

}