如何从Angular2的http post方法获取返回值？

Question

I have a requirement where I need to make a http post method request to a Web API ie save some data entered by the user. The Web API would return some values as a result and this result would be used for some UI logic.

I tried making the http post in synchronous way, but it doesn't work properly as expected.

Angular2 component calls this service to save the data:-

public SaveCubeReport(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any)
    {
        var result = this.SaveData(userName, cubeReport, APIServiceURL).subscribe(
            data => {
                console.log(data);
            });

        console.log(result);
}

Http post method call is as follows:-

SaveData(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any)
{
    var temp = this._http.post(APIServiceURL, JSON.stringify(cubeReport), { headers: ContentHeaders })
        .map((res: Response) => res.json())
        .do(() => {
            console.log('request finished');
        });
    return res;
}

Parent component where the angular2-modal popup is invoked.

var dialog = this.modal.open(SaveCubeReport, overlayConfigFactory(
{
    ReportName: this.ReportItem.rpt_name,
    ReportDescription: this.ReportItem.rpt_description,
    Application: this.ReportItem.application_name,
    Owner: this.ReportItem.owner,
    CubeId: this.CubeId,
    ReportId: this.ReportItem.rpt_id,
    ReportJson: JSON.stringify(this.getState())
}, BSModalContext));

dialog
.then((d) => d.result)
.then((r) => {
    // success
    console.log("Dialog ended with success: ", r);
    this.RefreshReportListDropdown(r);
}, (error) => {
    // failure 
    console.log("Dialog ended with failure: ", error);
});

function from where the service call is made

RefreshReportListDropdown(savedReportName: any)
{
    this._ClientAPIService.GetCubeReportsListByCubeWithEmptyRecord(this._SessionService.LoggedInUser, this._SessionService.SelectedApplication, this.cubeName, this._SessionService.ClientAPIServiceURL)
        .subscribe(
        (res) => {
            this.cubeReportList = res; //This result should contain all records including the recently saved data from the popup
            ....
        }
    );
}

All my request are made a asynch requests ie it doesn't wait to get the return values. What is the mistake here?

Answer 1

Return the result of http.post call in the SaveData method.

SaveData(userName: any, cubeReport: CubeReportViewModel, APIServiceURL: any)
{
    return this._http.post(APIServiceURL, JSON.stringify(cubeReport), { headers: ContentHeaders })
        .map((res: Response) => res.json())
        .do(() => {
            console.log('request finished');
        });
}

After this your subscribe in your consumer component will work correctly.

Answer 2

loginservice.ts :

  checklogin(user) {   
   return this.http.post("API_URL",user).map(resp => resp.json());
  }

logincomponent.ts :

   localvariable={} // or whatever u want 

   customFunction () {
     this.loginservice.checklogin(this.user).subscribe (data => 
     {this.localvariable=data;}) 

     // results is assigned now to this.localvariable
     //write your logic etc ... 
     }