如何在控制器中提供承諾數據對象並將數據從承諾傳遞到新函數

Question

我已經寫了角度控制器和服務來從json文件中讀取數據。服務讀取數據並將其傳遞給控制器​​它工作正常，但是當我嘗試將此數據分配給新對象時，它將無法正常工作。

我想在我的承諾中調用一個新函數，並將我的數據作爲對象傳遞給這個新函數，以便我可以在任何需要的地方使用它。 控制器代碼，

class WPEntryController { 
    static $inject = ["$location", "WPEntryService"]; 
    constructor($location, WPEntryService, $http) { 
     console.log("IN WPEntryController"); 
     this.$location = $location; 
     this.WPEntryService = WPEntryService; 
     this.loadWPEntryPagewithData(); 

    } 
    loadWPEntryPagewithData(){ 
     this.WPEntryService.loadWPEntryData().then(function(promise){ 
      this.DataObject = promise; 
      this.storeObject(); 
     }); 
    } 
    storeObject() { 
     console.log(this.DataObject); 
    } 
} 
angular.module("app").controller("WPEntryController", WPEntryController); 

服務代碼，

class WPEntryService { 
    static $inject = ["$http"]; 
    constructor($http) { 
    this.$http = $http; 
    } 
    loadWPEntryData() { 
     //read json file or provide URL for data 
     var promise = this.$http.get('...') 
      .then(function (dataObject) { 
       return dataObject.data; 
      }) 
      .catch(function (response) { 
       return response; 
      }); 
     return promise; 
    } 
} 

angular.module('app').service('WPEntryService',WPEntryService); 

Answer 1

您遇到的wrong this context in your then callback。使用箭頭功能代替：

loadWPEntryPagewithData(){ 
    this.WPEntryService.loadWPEntryData().then(dataObject => { 
//            ^^^^^^^^^^^^^^ 
     this.DataObject = dataObject; 
     this.storeObject(); 
    }); 
} 

但是，這種方法仍然很脆弱，可能無法按預期工作。這是更好的承諾本身存儲在該實例位置：

loadWPEntryPagewithData(){ 
    this.DataPromise = this.WPEntryService.loadWPEntryData(); 
    this.storeObject(); 
} 
storeObject() { 
    this.DataPromise.then(DataObject => console.log(DataObject)); 
}