javascript - 多个 $http promise 使用工厂， Angular

Question

我正在尝试在一个工​​厂中调用多个 $http 请求，我正在使用它来清除带有数据的多个输入并设置默认选择。一旦所有这 3 个都完成，我想调用一个 promise 来调用真实的表单数据(如果有的话，有时不会有，在这种情况下它什么都不做)来覆盖现有的默认值。

所以这是我的尝试-

工厂我建立了一个工厂来调用所有 3 个输入及其默认值(我正在单独发送它们，我现在无法更改)。它看起来像这样:

.factory("getDefaults", function() {

return {
    instructions: function() {
        $http({
        method: "GET",
        url: "/getStringDropdown/materials"
    })
    .success(function(data, status, headers, config){
        $scope.instructions.materials = data.text;
    });

    $http({
        method: "GET",
        url: "/getStringDropdown/reinforce"
    })
    .success(function(data, status, headers, config){
        $scope.reinforce = data.options;
        $scope.instructions.reinforce = $scope.reinforce[data.default];
    });

    $http({
        method: "GET",
        url: "/getStringDropdown/procedure"
    })
    .success(function(data, status, headers, config){
        $scope.procedures = data.options;
        $scope.instructions.procedures = $scope.procedures[data.default];
    });
     //return data here? 

    }
  };

})

我的问题是 - 我必须在这里返回数据吗？我也可以在这里定义正在使用的范围(与实际 Controller 中的范围相对)。我很确定这是错误的，但我找不到一个很好的例子来说明如何正确地构造这样的东西。

controller中的调用

所以我是 Controller ，我的想法是我会尝试这样的事情 -

    getDefaults.instructions().then(function(){
            //possible return data here
            //AFTER data is flushed out call farm data

    $http({
        method: "GET",
        url: "/getSavedFormData/formID"
    })
    .success(function(data, status, headers, config){
        $scope.instructions.materials= data.materials;
        $scope.instructions.procedures = $scope.procedures[data.procedure];
        $scope.instructions.reinforce = $scope.reinfoce[data.reinforcement];
    });

        });

这么大的图景 - 我正在尝试让这 3 个调用运行和填充，然后是第二个调用。我不确定什么可能是或可能不是最好的方法，基于尝试将 3 个调用合并到 1 个位置并 promise 在它们全部完成时，工厂似乎是有意义的。我在想我需要返回数据，但如果我可以在工厂中定义 Controller 的范围，那就太好了。我的方位仍然有 Angular ，所以任何/所有指导都将不胜感激。感谢阅读!!

Answer 1

您的服务并不知道开箱即用的 $scope，您可能也不希望它知道，因为服务的全部意义在于协助实现代码的模块化。

您可能想要做的实际上是从您的服务返回 $http promise ，以便您的 .success() 回调实际上可以通过闭包(在 Controller 内部)在 $scope 上设置模型。

所以你的工厂会更像这样:

.factory("getDefaults", function() {
  return {
    instructions: $http({ method: "GET", url: "/getStringDropdown/materials" })
  }
});

如果您真的认为您永远不需要单独进行这些 http 调用，并且您只关心它们何时全部解析。您可以返回一个 $q.all() promise ，当它们全部解决时，该 promise 将解决:

.factory("getDefaults", function($http, $q) {
  var promise1 = $http({ method: "GET", url: "/getStringDropdown/materials" });
  var promise2 = $http({ method: "GET", url: "/getStringDropdown/materials" });
  var promise3 = $http({ method: "GET", url: "/getStringDropdown/materials" });
  return {
    data: $q.all([promise1,promise2,promise3]),
    anotherCall: $http.get('/anothercallUrl')
  }
});

所以现在从你的 Controller 你可以做:

function myCtrl($scope,getDefaults){
   getDefaults.data.then(function(data){
     //access all three of your promises, their data, and set $scope models here
     getDefaults.anotherCall.success(function(data){
       //or another http call
     });
   };
}

$q.all 文档在这里:https://docs.angularjs.org/api/ng/service/$q