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

它更直观一点，它实际上利用承诺的好处。但是，最终取决于你。