如何從Angular2的http post方法獲取返回值？

我有一個需求，我需要對Web API發出http post方法請求，即保存用戶輸入的一些數據。 Web API將作爲結果返回一些值，並且此結果將用於某些UI邏輯。如何從Angular2的http post方法獲取返回值？

我嘗試以同步方式製作http文章，但它無法正常工作。

Angular2組件調用該服務保存數據： -

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方法調用如下： - 其中angular2模態彈出被調用

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; 
}

父組件。

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); 
});

從Service調用時

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 
      .... 
     } 
    ); 
}

我所有的要求都做出了非同步的要求，即它不會迫不及待地想返回值的功能。這裏有什麼錯誤？

來源

2017-07-06 Krishnan

結果是訂閱，沒有返回值。請詳細閱讀一下異步和RxJS，否則你會很困難。 – jonrsharpe

[Angular 2 - 直接從Observable返回數據]的可能副本（https://stackoverflow.com/questions/37867020/angular-2-return-data-directly-from-an-observable） – jonrsharpe

返回SaveData方法中http.post調用的結果。

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'); 
     }); 
}

此後您的消費者組件中的subscribe將正常工作。

來源

2017-07-06 21:13:50

仍然沒有正常工作或按預期工作。我在關閉角度2模式彈出窗口時調用了上述服務。保存記錄後，模式彈出窗口關閉，我需要創建一個新服務來獲取包括最近保存的數據的記錄列表，並在調用彈出窗口的父組件中綁定下拉列表。但是目前它沒有得到列表中最近保存的記錄？（請參閱編輯的問題） – Krishnan

例如，您是否在Plunker中有任何示例，以便我可以看到問題的實際行動？ –

現在工作正常，是我的錯誤。早些時候，我調用了SaveCubeReport方法，它像angular2組件和api服務調用之間的額外包裝器一樣。但是，當我刪除這個，並直接調用我的angular2組件的SaveData（）方法，它工作正常。 – Krishnan

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 ... 
    }

來源

2018-01-13 00:08:53

如何從Angular2的http post方法獲取返回值？

回答

相關問題