AngularJS Double HTTP requests, is this a good solution, or am I doing something wrong?

Question

Structure

I have two controllers and one model.

• an order controller that processes one step of the order process
• order navigator controller that only handles order navigation
• An order model that processes all order data.

All information is stored in the order object, depending on which package you have chosen, you get a tab to configure this package.

During navigation through the various stages of the order, the navigation controller always does its job, and the order controller can change in different controllers necessary for the specific configuration step that you are currently using.

Scenario

When loading the first state, initialization of the order controller and initialization of the nav controller. Both calls to the OrderModel.getOrder () method, which is a promise using an http call.

If both controllers are initialized and the promise has not yet been resolved, it raises a double request for api, which, I think, is a bit picky.

Decision

I created a wrapper around the $ q library, which adds a new method, unique.

A unique method is to keep a promise in the model if the promise does not exist, but it creates a new promise, otherwise it returns a promise that is not yet resolved. This prevents multiple http calls.

Question

Since this solution looks so simple and simple, I feel like I'm doing something wrong, what do you guys think about this structure / solution?

Code example:

Controllers getOrder method:

/**
     * @name getOrders
     * @param force
     * @description
     * Get the given order
     */
    function getOrder (id, force) {
        return $q(
            function (resolve, reject) {
                Orders.getOrder(id, force).then(
                    function (order) {
                        vm.order = order;
                        resolve(order);
                    },
                    reject
                );
            }
        );
    }

Model getOrder method:

function getOrder (id, force) {
        var url = AppConfig.ApiUrl + '/order/' + id;
        var promiseUrl = url + '-force-' + force;

        return $qPromise.unique(promiseUrl, function (resolve, reject) {
            if (!force && model.orders[id]) {
                return resolve(model.orders[id]);
            }

            $http.get(url, { bearer: true }).then(
                function (response) {
                    model.orders[id] = response.data.data;
                    resolve(model.orders[id]);
                },
                reject
            );
        });
    }

$q   (function() {

angular.module('app').factory('$qPromise', qWrapper);

qWrapper.$inject = ['$q'];

/**
 * @name QWrapper
 * @param $q
 * @returns {*}
 * @description
 * Wrapper arround $q to add the unique method.
 */
function qWrapper($q) {
    var model = {
        promises: {}
    };

    $q.unique = uniquePromise;

    return $q;

    /**
     * @name uniquePromise
     * @param id
     * @param cb
     * @description
     * Promise wrapper for preventing multiple calls for the same data.
     * @returns {*}
     */
    function uniquePromise (id, cb) {
        if (model.promises[id]) {
            return model.promises[id];
        }

        var promise = model.promises[id] = $q(cb);
        promise.catch(console.warn);

        $q.when(
            promise,
            function () { delete model.promises[id];  },
            function () { delete model.promises[id];  }
        );

        return promise;
    }
}

})();

Answer 1

, http , HTTP- json. ,

var app=angular.module('myapp',[]);

app.controller('contactController',function($scope,$http,$q)
{
	
	var promise1=$http.get("https://jsonplaceholder.typicode.com/posts/1");
	var promise2=$http.get("https://jsonplaceholder.typicode.com/users/1");
$q.all([promise1, promise2]).then(function(data){ 
	$scope.first=data[0];
	$scope.second=data[1];
    console.log("------FIRST HTTP RESPONSE_____");
	console.log(JSON.stringify($scope.first));
      console.log("------SECOND HTTP RESPONSE_____");

	console.log(JSON.stringify($scope.second));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<body ng-app="myapp" ng-controller="contactController">
  </body>

. $scope.first HTTP- $scope.second http.

, , , , . , .