如何使多个HTTP请求？ [英] How to make multiple http requests?

问题描述

我有我的父母和孩子控制器的HTTP请求：

I have an HTTP request in my parent and child controller:

家长控制

//Product is a $resource object that return http request as a promise.
Product.getItem()
   .then(function(items) {
      $scope.items = items
      //do something in the parent controller.
})

儿童控制器

Product.getItem()
   .then(function(items) {          
      $scope.items = items
      //do something in the child controller
})

制品厂

angular.module('testApp').factory('Product', function($http,$q) {
    var service = {}
    service.getItem = function() {
        return http.$get('api/url');
    }
    return service; 
})

当我在某些网页儿童控制器启动。问题是，当我启动这些网页时，codeS将使双HTTP请求的API / URL，因为父母和孩子都控制器做出请求。虽然我的应用程序仍然有效，我不知道是否有更好的方法来解决它。感谢您的帮助！

Child controller is launched when I am in certain pages. The problem is when I launch those pages, the codes will make double http request to api/url because parent and child controllers both make the requests. Although my app still works, I was wondering if there is a better way to solve it. thanks for the help!

推荐答案

编辑：
我调查了菲尔的评论了一下，和固定（重写）我的例子。在底部的plunker反映这些变化。这里是更新code：

I investigated Phil's comments a bit, and fixed (rewrote) my example. The plunker at the bottom reflects these changes. Here is the updated code:

app.controller('MainCtrl', function($scope, getStore) {
  getStore.get().then(function(data) {
    $scope.data = data
  })
});
app.controller('ChildCtrl', function($scope, $timeout, getStore) {
  $timeout(function() {
    getStore.get().then(function(data) {
      $scope.test = data
    })
  },3000)

});

app.factory('getStore', function($http, $q) {
  var self = this;
  var data;
  return {
    get: function() {
      if (data) {
        console.log(data);
        console.log('already got data')
        return $q.when(data)
      } else {
        data = $http.get('test.json')
        .then(function(response) {
          console.log('fetched data')
          return response.data;
        })
        return data
      }
    }
  }
})

---

下面是一个解决方案 - 分开你的$ http.get到工厂并存储该值在那里。工厂都是单身，所以两个控制器可以访问和检查数据。

---

Here is one solution - separate your $http.get to a factory and store the value there. Factories are singletons, so both controllers can access and check the data.

JS：

app.controller('MainCtrl', function($scope, getStore) {
  $scope.data = getStore.get()
});
app.controller('ChildCtrl', function($scope, $timeout, getStore) {
  $timeout(function() {
    $scope.data = getStore.get()
    var check = getStore.checkData();
    console.log('Data in store: ' + angular.toJson(check));

  },1000)
  $scope.getData = function() {
    console.log(getStore.get());
  }
});

app.factory('getStore', function($http) {
  var self = this;
  return {
    data: undefined,
    get: function() {
      if (self.data) {
        console.log('already got data')
        return self.data
      } else {
        $http.get('test.json')
        .success(function(data) {
          console.log('no data found');
          self.data = data;
          console.log(self.data);
          return self.data;
        })
      }
    }
  }
})

这只是运行一个检查，以查看该值是否已经存储或没有，然后返回它，如果它是的，如果不是，它得到，商店，并将其返回。

It just runs a check to see whether the value is already stored or not, and then returns it if it is, and if not, it gets, stores, and returns it.

Plunker

这篇关于如何使多个HTTP请求？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！