CODEWITHSUNDEEP
javascriptangularjshttp
user3523583
user3523583

Reputation: 163

How to make $q and $http work together?

I am trying to get this code to work

getDataObject = {
    transformData: function (wmsLayer) {
    var promise = this.getDataFromServer(wmsLayer);
    promise.then(
        function(XMLInput){
            layers = $(XMLInput).find('LayerDescription').each(function() {
                var item = $(this);
                var layerName = item.attr('name');
                layerNames.push(layerName);
            });       
            },
        function(data){
                this.error(data)
                });
},

getDataFromServer: function(wmsLayer) {
var deferred = $q.defer();
var layerGroup = wmsLayer.params.LAYERS[0];
    $http.get({
        url : '//localhost/geoserver/BL_WFS/wms',
        params : {
            service : 'WMS',
            version : '1.1.1',
            request : 'DescribeLayer',
            layers :  layerGroup,
        },
        responseType : 'xml'
    })
    .success(function(data){
        deferred.resolve(data);
    })
    .error(function(error){
        deferred.reject(error);
    });
return deferred.promise;        
}

But I am running in two problems:

  1. Although I set the url in the $http the function keeps calling the url which the page comes from.

  2. I would like to execute transformData function only when the response has got back with the data and I am not sure I designed the promise/defer structure correctly.

Upvotes: 1

Views: 59

Answers (2)

Arg0n
Arg0n

Reputation: 8423

Although @SargoDarya's answer is correct, I thought I'd clarify how you can change your code.

Change this:

getDataFromServer: function(wmsLayer) {
    var deferred = $q.defer();
    var layerGroup = wmsLayer.params.LAYERS[0];
    $http.get({
        url : '//localhost/geoserver/BL_WFS/wms',
        params : {
            service : 'WMS',
            version : '1.1.1',
            request : 'DescribeLayer',
            layers :  layerGroup,
        },
        responseType : 'xml'
    })
    .success(function(data){
        deferred.resolve(data);
    })
    .error(function(error){
        deferred.reject(error);
    });
    return deferred.promise;        
}

To this:

getDataFromServer: function(wmsLayer) {
    var layerGroup = wmsLayer.params.LAYERS[0];
    return $http.get('//localhost/geoserver/BL_WFS/wms', {
        params : {
            service : 'WMS',
            version : '1.1.1',
            request : 'DescribeLayer',
            layers :  layerGroup,
        },
        responseType : 'xml'
    });       
}

Since $http.get returns a promise already.

Upvotes: 1

That White Eyebrow Guy
That White Eyebrow Guy

Reputation: 569

First, you're using angulars shorthand $http.get. This one has function signature of $http.get(url, config) so it should be

$http.get('//localhost/geoserver/BL_WFS/wms', {
    params : {
        service : 'WMS',
        version : '1.1.1',
        request : 'DescribeLayer',
        layers :  layerGroup,
    },
    responseType : 'xml'
})

Secondly, $http already returns a Promise object you can use which gets automatically resolved or rejected so you can return that directly in this case.

Source: https://docs.angularjs.org/api/ng/service/$http

Edit: Keeping the angular documentation at hand and checking it for this is always a good idea.

Upvotes: 2

Related Questions