Question

TypeScript：

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通过node.js从我的mongo数据库中获取数据。并将其发送到我的api控制器。我正在从数据库中成功获取数据。第一次单击后，控制器的对象处于默认的初始化状态，第二次单击后，控制器将获得我期望的数据。有没有办法等待fetchLists完成过程，然后执行向api控制器请求的发布。我希望用户单击一次后即可看到数据。

我以为使用.subcribe是异步的吗？

Answer 1

如果我对您的理解正确，则可以在此处简单地执行发布请求：

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

          this.lists = d;
        }
      })

      // EXECUTE HERE
    });
}

这样，您将获取列表，对其进行处理，然后执行您的帖子。使用可观察对象称为反应式编程。如here所述，

反应式编程是使用异步数据流进行编程

Answer 2

据我所知，您的问题是执行了 this.fetchLists（searchQuery），但是在将列表填充到subscription-方法之前，API-Post已经完成。

我认为您可以使用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 3

我认为您想要的是使用合并映射链接两个调用。我修改了您的示例以显示操作方法。

首先，您的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 4

您可以创建其他方法，该方法将调用fetchlist并返回可观察的结果，然后我们可以调用getSocialDataTwitter（）方法。

The backend was *originally* set to 'TkAgg' by the following code:

如何在Angular 5 +中异步等待？

4 个答案: