2個控制器依賴於工廠內的HTTP請求

Question

因此，我有2個控制器，它們依賴於工廠內某個功能獲取的數據。工廠看起來是這樣的：

factory.getData = function() { 
    const req = {...}; 
    return $http(req).then((res) => { 
     this.data1 = res.data.response[0]; 
     this.data2 = res.data.response[1]; 
     return res; 
}) 

然後在我的控制器：

this.factory.getData().then((data) => { 
    this.controllerData1 = this.factory.data1; 
    this.controllerData2 = this.factory.data2; 
}) 

注：我省略了實際的工廠名稱。 這讓我得到我需要的數據，但是兩個控制器都會觸發顯然不理想的http請求。所以我需要第二個控制器等待data1和data2被定義。我怎樣才能做到這一點？

Answer 1

factory.dataPromise = null; 

factory.getData = function() { 
    if (this.dataPromise !== null) { 
     return this.dataPromise; 
    } 
    else { 
     const req = {...}; 
     return this.dataPromise = $http(req).then((res) => { 
      this.data1 = res.data.response[0]; 
      this.data2 = res.data.response[1]; 
      return res; 
     }) 
    } 
} 

這有點粗糙，但應該能夠在這裏找到工作，雖然老實說我會建議重構一些代碼。但我想盡可能少地重構這個答案。

關鍵是要始終回報承諾。只要你這樣做，你就沒事。如果我們檢查this.data1和this.data2是否已經可用，我們可以返回一個立即解決的承諾，而不需要進行另一個HTTP調用。

哦，如果不清楚，你需要包含$q（或者將其替換爲你想要的任何其他Promise庫），以便能夠清楚地創建承諾。

思考：不是一個真正的嚴重問題，但是當你調用factory.getData()你不實際使用由承諾解決的價值。這就是爲什麼在我的回答中，我只是有一個變量whateverdata，因爲它根據您的代碼返回的內容並不重要，因爲它沒有被使用。

也許那麼，最好讓承諾做的工作。我會建議在這種情況下，這個重構：

factory.dataPromise = null; 

factory.getData = function() { 
    if (this.dataPromise !== null) { 
     return this.dataPromise; 
    } 
    else { 
     const req = {...}; 
     return this.dataPromise = $http(req).then((res) => { 
      this.data1 = res.data.response[0]; 
      this.data2 = res.data.response[1]; 
      return { data1: this.data1, data2: this.data2 }; 
     }) 
    } 
} 

this.factory.getData().then((data) => { 
    this.controllerData1 = data.data1; 
    this.controllerData2 = data.data2; 
}) 

它更直觀一點，它實際上利用承諾的好處。但是，最終取決於你。