AngularJS $http.get 两次发送相同的 xhr 请求答案

【问题标题】：AngularJS $http.get send same xhr request twiceAngularJS $http.get 两次发送相同的 xhr 请求
【发布时间】：2017-09-13 10:48:08
【问题描述】：

在我的应用中，我使用的是Angularjs-gulp-browserify-boilerplate

在我的服务中，我有下一个代码：

function ResourceService($http, AppSettings) {
    'ngInject';

    const service = {};

    service.getResource = function(params) {
        console.log('Get resource')
        return new Promise((resolve, reject) => {
            $http.get(AppSettings.apiUrl + 'v1/resorce')).then((resp) => {                
                resolve(resp);
            }).catch((err, status) => {
                reject(err, status);
            });
        });
    };

在控制器中：

function ResourceCtrl(BidService) {
    'ngInject';

    // ViewModel
    const vm = this;
    ResourceService.getResource().then((res) => {        
         vm.items = res.data;
    });

}
export default {
    name: 'ResourceCtrl',
    fn: ResourceCtrl
};

在开发控制台中：

如何防止查询重复？

【问题讨论】：

能否请您仔细检查一下ResourceCtrl 只在视图中提及过一次？也许它可以从路由配置中再次加载（只是猜测）。
ResourceCtrl 从 config(ui-router) 加载一次，但它用作嵌套控制器 FE：account account.resources --> xhr 1 次。 account.resources.resource --> xhr 2 次。

标签： javascript angularjs ajax angular-ui-router

【解决方案1】：

默认情况下$http 返回一个承诺。所以你不需要再次创建一个 Promise 来解决它。只需从服务返回请求并从控制器解决承诺。

 service.getResource = function(params) {
        console.log('Get resource')
        return $http.get(AppSettings.apiUrl + 'v1/resorce'))
 };

控制器

ResourceService.getResource()
  .then((res) => {        
         vm.items = res.data;
  }).catch((res) => {
    console.log(res.data)
  });

【讨论】：

它不能防止 xhr 复制