angular2 2异步调用

Question

Angular2，打字稿

我有一个组件，一次从服务器显示1个对象。

单击按钮后，表单会对对象执行某些操作，然后将数据发送到服务器。 立即在下一行中，得到下一个对象。

this.rawS.updateTags({......}); //Update object
this.candidateC.footerNavigateTo(.....);//Get next object

但是在竞争条件下，要获取下一个对象的ajax在updateTags ajax到达服务器之前已到达服务器。

更新代码的代码为

  updateTags(rawCandidate) {
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate)
      .subscribe(data => {
        console.log(data);
      });
  }

doPost的代码是

doPost(url, inputParamJSON){
    let httpResponse  = this.http
      .post(url, inputParamJSON, this.options)
      .map(this.extractData)
      .catch(this.handleAjaxError);
    return httpResponse;
}

“ continue_screening”的路由具有一个路由解析器，该路由解析器会带来下一个对象。

我如何确保footerNavigateTo（）仅在updateTags完成其整个周期之后运行？

Answer 1

如果您希望根据调用updateTags(rawCandidate)函数的位置而具有不同的行为，那么我提出以下解决方案：

  updateTags(rawCandidate, action) {
    this.baseAjaxService.doPost(this.baseUrl + 'tags/update', rawCandidate)
      .subscribe(
       data => {
        action(data);

      },
      error => {
          console.log("error"); //handle error here
      });
  }

然后，您可以像下面这样调用函数：

updateTags(rawCandidate, function(data){
   console.log(data);
   this.candidateC.footerNavigateTo(.....);//here you can use data
});

Answer 2

在这里要实现的是将两个http调用链接起来，使它们以某种方式依赖。 在Angular 1.X中，可以使用promise来完成，但是使用AngularJS 2可以使用flatMap来实现。

请参阅“ 相关调用”部分中的此链接http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http 。

PS：如本文所述（ 在Angular 2中组合诺言 ），您也可以使用toPromise()将Observable（即，异步http调用）转换为Promise，如果您对此更加熟悉的话。