angularjsangular-promiseangularjs-httpangularjs-q

Is there an any method ordering when $q.all has multiple http call functions in Angularjs?


First of all, I am not good at angularjs.

While I've been studying about $q, I faced a weird problem.

When I use $q.all, I put $http in regular sequence expecting to get results in same order,

but what I get was random results.

See this and correct my stupidity.

    $q.all([
        HttpService.editItem(
            $scope.$parent.category_id,           //  category id
            Define.CAR_CAT,                         //  category url to request
            $scope.car_id,                           //  car_id wanna edit
            {car_name: inputValue.toUpperCase()}    //  data
        ),
        HttpService.getCarList(
            $scope.$parent.category_id,     //  category id
            Define.CAR_CAT                    //  category url to request
        )
    ]).then(function (results) {
        if (results[0].statusText === 'OK' && results[1].statusText === 'OK') {
            .....
    });

'HttpService' is a service of my app. It returns promise.

What I expected was

edit car name first, get car list later.

But results I got was get car list first, edit car name later.

And I'm using

return $q(function(resolve, reject){ });

instead of using

$q.defer();

.

.

.

.

and these are my HttpService part

function editItem(cat_id, cat_url, content_id, item_data) {
    return $q(function (resolve, reject) {
        $http({
            method: 'PUT',
            url: Define.TEST_URL + cat_id + cat_url + content_id,
            data: item_data
        }).then(function (response) {
            resolve(response);
        }, function (error) {
            reject(error);
        });
    });
}



function getCarList(cat_id, cat_url) {
    return $q(function (resolve, reject) {
        $http({
            method: 'GET',
            url: Define.TEST_URL + cat_id + cat_url
        }).then(function (response) {
            resolve(response);
        }, function (error) {
            reject(error);
        });
    });
}

and here is the getCarList response

{
    "error_msg": "",
    "error_num": 0,
    "statusText": "OK"
    "results": [
            {
            "car_id": "CAR0121",
                "car_name": "AUDI R8"
            },
            {
                "car_id": "CAR0122",
                "car_name": "AUDI A6"
            },
            {
                "car_id": "CAR0128",
                "car_name": "BENZ"
            },
            {
                "car_id": "CAR0130",
                "car_name": "PORCHE"
            },
    ]
}

Solution

  • If you want the calls to be sequential, you'll need to call them by using promise chaining instead of $q.all

    HttpService.editItem(
            $scope.$parent.category_id,             //  category id
            Define.CAR_CAT,                         //  category url to request
            $scope.car_id,                          //  car_id wanna edit
            {car_name: inputValue.toUpperCase()}    //  data
        )
        .then(function(result) {
            if (result.statusText === 'OK') {
                return HttpService.getCarList(
                    $scope.$parent.category_id,     //  category id
                    Define.CAR_CAT                  //  category url to request
                )
            }
            else {
                return $q.reject();
            }
        })
        .then(function (result) {
            if (result.statusText === 'OK') {
            .....
        });