Как асинхронно ждать в Angular 5+?

Question

Машинопись:

getSocialDataTwitter(searchQuery) {
  this.fetchLists(searchQuery);
  const headers = new HttpHeaders().set('content-type', 'application/json');
  return this.http.post<RightOperatorPaneltwitter>(this.baseUrl + 'api/OperationData/GetAllTweetsByNamePost', this.lists, { headers }).subscribe(result => {
    this.tweets = result;
  }, error => console.error(error));
}

fetchLists(searchQuery) {
  this.listService.getLists()
    .subscribe((data: List[]) => {
      data.forEach(d => {
        if (d.name === searchQuery) {

          this.lists = d;
        }
      })
    });
}

Я новичок в Angular 5 + .Netcore 2.0. Я хотел бы использовать fetchLists для получения данных из моей базы данных mongo с помощью node.js. и отправить его моему контроллеру API. Я получаю данные из базы данных успешно. После первого щелчка объект в моем контроллере находится в инициализированном состоянии по умолчанию, а после второго щелчка контроллер получает ожидаемые данные. Есть ли способ дождаться завершения процесса fetchLists, а затем выполнить сообщение, запрошенное для контроллера API. Я хотел бы, чтобы пользователь видел данные после одного клика.

Неправда ли я, что использование .subcribe является асинхронным?

Answer 1

Я думаю, что вы хотите соединить оба вызова с помощью карты слияния. Я изменил ваш пример, чтобы показать, что делать.

Прежде всего, ваш метод fetchLists не должен подписываться на службу списков, а только конвертировать данные и возвращать полученную наблюдаемую. Затем в вашем методе getSocialDataTwitter вы будете вызывать fetchLists и использовать mergeMap для цепочки вашего второго http-вызова.

fetchLists(searchQuery) {
    // Make note how we map the result and then return the observable 
    // without subscribing.
    return this.listService.getLists()
    .pipe(
        map((data: List[]) => data.find(d => d.name === searchQuery))
    )
}

getSocialDataTwitter(searchQuery) {
    // As the headers and url will not change, we can define them here
    const headers = new HttpHeaders().set('content-type', 'application/json');
    const url = this.baseUrl + 'api/OperationData/GetAllTweetsByNamePost';

    // Here we call our initial method, but instead of subscribing directly
    // we use mergeMap to chain our observables
    this.fetchLists(searchQuery)
        .pipe(
            // Lists is the result we created with the map in fetchLists.
            mergeMap(lists => this.http.post<RightOperatorPaneltwitter>(url, lists, { headers }))
        )
        // Only after we subscribe here, the list service is called.
        .subscribe(result => this.tweets = result);
}

Answer 2

Вы можете создать дополнительный метод, который будет вызывать список выборок и возвращать наблюдаемый результат, затем мы можем вызвать метод getSocialDataTwitter ().

fetchLists(searchQuery) {
  return this.listService.getLists()
    .subscribe((data: List[]) => {
      data.forEach(d => {
        if (d.name === searchQuery) {
          this.lists = d;
        }
      });
      return Observable.of(this.lists);
    });
}

getData(){
    return this.fetchLists(searchQuery).pipe(
       this.fetchLists(),
       switchMap((result)=>{
          return this.getSocialDataTwitter();
       })
    )
}

Answer 3

Насколько я понял, ваша проблема в том, что this.fetchLists (searchQuery) выполняется, но перед заполнением списка методом подписки выполняется API-публикация.

Я думаю, что вы можете исправить это с помощью функции асинхронного / ожидающего ожидания ES2017:

async getSocialDataTwitter(searchQuery) {
  await this.fetchLists(searchQuery);
  const headers = new HttpHeaders().set('content-type', 'application/json');
  return this.http.post<RightOperatorPaneltwitter>(this.baseUrl + 'api/OperationData/GetAllTweetsByNamePost', this.lists, { headers }).subscribe(result => 
  {
   this.tweets = result;
  }, error => console.error(error));
}

Answer 4

Если я вас правильно понял, вы можете просто выполнить запрос на почту здесь:

fetchLists(searchQuery) {
  this.listService.getLists()
    .subscribe((data: List[]) => {
      data.forEach(d => {
        if (d.name === searchQuery) {

          this.lists = d;
        }
      })

      // EXECUTE HERE
    });
}

Таким образом, вы получите свой список, обработаете его и затем выполните свое сообщение. Использование наблюдаемых называется реактивным программированием. Как указано здесь ,

Реактивное программирование - это программирование с асинхронными потоками данных