Как заставить функцию ждать загрузки данных из второй функции перед выполнением в угловом режиме

Question

Я просто не понимаю, как работает async / await; вот в чем я считаю проблема. Я пытаюсь загрузить данные из моего сервиса в мой компонент, но я получаю неопределенное. Но правильные данные загружаются правильно из функции, которую я вызываю. Я предполагаю, что это способ реструктурировать код так, чтобы async / await работал, но я понятия не имею, как.

К сожалению, учебники по async / await просто запутали меня больше.

Я пытался поиграть с установкой async / await в разных местах, но, честно говоря, я не знаю, что делаю.

Это функция в моем компоненте, вызывающая другую функцию из моего UserService

async onSubmit() {
    console.log(await this.userservice.currentusercountry());
  }

Это функция в моем пользовательском сервисе

async currentusercountry() {
    let x;
    this.currentuser().subscribe(value => {
      console.log(value.country.toString());
      x = value.country.toString()
    });
    await console.log(x);
    return x;
  }

Я ожидаю получить что-то подобное в моем console.log

India         user.service.ts:65 
India         user.service.ts:68 
India         pg.component.ts:43 

Но вместо этого я получаю

undefined     user.service.ts:68 
undefined     pg.component.ts:43 
India         user.service.ts:65

Answer 1

попробуйте это:

async currentusercountry() {
    let x;
    this.currentuser().subscribe(value => {
      console.log(value.country.toString());
      x = value.country.toString();
  await console.log(x);
    return x;
    });

  }

Answer 2

Будь вещами "более естественными". У вас есть две наблюдаемые

1. this.userservice.currentusercountry ()
2. this.currentuser ()

вы можете использовать forkjoin, чтобы иметь уникальную подписку

forkjoin([this.userservice.currentusercountry(),this.currentuser()])
         .subscribe(res=>{
            console.log(res[0]) //the response from currentuserCountry
            console.log(res[1]) //the response from currentuser
          })

Answer 3

Почему вы не используете RXJS switchMap?

Например:

onSumit(){
  this.userService.currentUserContry().subscribe();
}

UserService

currentUserContry(){
  return this.currentUser().pipe(
    switchMap((res) => {
      const x = value.country.toString()
      return of(x);
    })
  )
}

Answer 4

Я объясню в комментариях, почему ваша функция работает так, как она работает.

async currentusercountry() {
    let x;  // declare some variable, its value is initially undefined
    this.currentuser().subscribe(value => { // everything inside subscription will 
      console.log(value.country.toString()); // be executed LATER
      x = value.country.toString()
    });
    await console.log(x); // this is executed instantly
    return x; // this is also executed instantly, with current value of x, i. e. undefined
  }

Вот как это исправить:

async currentusercountry() {
    const value = await this.currentuser().toPromise();
    const x = value.country.toString();
    console.log(x);
    return x;
}

Answer 5

вы можете попробовать вот так

async onSubmit() {

    let data = await this.userservice.currentusercountry();
    console.log(data);
    console.log('works!!!!!');
}

UserService

async currentusercountry() {
  return promise = new Promise ((resolve, reject) => {
    let x;
    this.currentuser().subscribe(value => {
      console.log(value.country.toString());
      x = value.country.toString()
      resolve(x); // here we are passing value to our component
    });
  });
}