调用多个ajax并等待结果Angular2

时间:2018-03-14 12:16:36

标签: ajax angular

我的Angular有问题。我有这个功能:

private callUserInfo(): any {
this.isLoading = true;

return this._ajaxService.getService('/system/ping')
  .map(
    result => {
      this.userId = 
         result.participant.substring(result.participant.indexOf('#'));
      this.isLoading = false;
    }
  )
  .catch(error => {
    return Observable.throw(error);
  });
}

public loadUserData(userName: string): any {
this.isLoading = true;

return this._ajaxService.getService('/User/' + userName)
.map(
  result => {
    const data = result[0];

    this.user = new User(
        data.id,
        data.contacts[0].email,
        data.name,
        data.surname,
        data.address.street,
        data.address.city,
        data.address.state,
        data.address.country,
        data.address.postCode,
        data.address.timeZone);

    this.isLoading = false;
})
.catch(error => {
  return Observable.throw(error);
});
}

public getUser(): any {

if (this.user == null) {
  this.callUserInfo().subscribe(() => {
    this.loadUserData(this.userId).subscribe(() => {
      return this.user;
    });
  });
} else {
  return this.user;
}
}

在我的组件中,我将此服务称为此函数(auth服务是定义了函数的服务):

constructor(private _auth: AuthService) {
    this.user = _auth.getUser();
  }

但它仍然返回null(因为Ajax调用没有完成?)有人可以解释一下,如何调用这两个调用(首先是系统/ ping服务并基于return(userId)我需要调用第二个ajax调用( / user / id)。在这两个调用之后,我已经在我的服务中定义了用户,我可以将它返回到其他组件。有人可以探究我,我做错了什么,或者我怎么做得更好?我使用的是最新的角度的版本。

P.S。获取服务来自我的包装服务:

getService(url: string): Observable<any> {
          return this.http
              .get(this.base + url, this.options)
              .map(this.extractData)
              .catch(this.handleError);
      }

2 个答案:

答案 0 :(得分:1)

this.user==null

,您没有返回任何内容

按以下方式更改您的功能:

userObservabel=new BehaviourSubject(null);
public getUser(): any {

  if (this.user == null) {
    this.callUserInfo().subscribe(() => {
     this.loadUserData(this.userId).subscribe(() => {
       this.userObservabel.next(this.user);
      });
    });
    return this.userObservabel.asObservable();
   } else {
    return this.userObservabel.asObservable();
   }
}

然后你需要订阅它

constructor(private _auth: AuthService) {
  _auth.getUser().subscribe(user => this.user = user);
 }

答案 1 :(得分:0)

您需要在subscribemap方法中调用第二项服务,即Observable已返回承诺并已解决。一旦解决了,你应该打电话给你的链式服务。

从我的POC剪下的样本可能会帮助您

    this._accountListService.getAccountsFromBE().subscribe(
        response => {
            this.response = response;
            this._accountListService.getAccountSorting().subscribe(
                response => {
                    this.acctSort = response;
                    if (response.prodCode) {
                        this._accountListService.getAccountOrder().subscribe(
                            response => {
                                this.acctOrder = response;
                                this.response = this.setAccountOrder(this.response);
                                this.response.sort(this.myComparator);
                                this.acctFlag = true;
                                if (this.prodDesc) {
                                    this.loader = false;
                                    this.accountDetl = this.response[0];
                                    this.accountDetl.entCdeDesc = this.prodDesc[this.accountDetl.entProdCatCde];
                                }
                            },
                            err => console.log(err)
                        );
                    }
                },
                err => console.log(err)
            );
        },
        err => console.log(err)
    );
相关问题