Rest Webservice call in AngularJS ( promise )

Question

AngularJS : 1.4.X
Scenario 1: Works fine
Scenario 2: Throws 404 error on line xhr.send(isUndefined(post) ? null : post); in angular.js

I'm trying to add inbuilt angular cache to our existing app, As i mentioned in scenario 1 we consume rest call in factory 'restFactory' and inject the factory to controller 'bookController', the promise is resolved and data loads fine.

Factory: restFactory

(function () {
    "use strict";
    angular.module('myApp').factory("restFactory",['$http','confi', function($http,config){

    function getBooks (){  
       return $http.get(config.serverName+"bookshelf/rest/books/data/geRestBooks");
    }
    return {
        getBooks : getBooks
    };
}]);
})();

Controller: bookController

   $scope.getComicbooks = function() {
        restFactory.getBooks().then(function(response) {        
            $scope.names = response.data;
        }, function(error) {
            $scope.error = error;
            $scope.names = [];
        });
    };

Now in scenario 2, I changed the service call in factory to object with more details. But i get exception from controller while resolving the promise ( i have only added the changed code )

function getBooks (){  
   return $http.get({
   cache: true,
   method: 'GET',
   url : config.serverName+"bookshelf/rest/books/data/geRestBooks"
   });
}

ERROR: angular.js:10765 GET http://127.0.0.1:53814/views/[object%20Object] 404 (Not Found)

Network Tab:
In scenario#1 this would have been a method call getBooks

@AdamWolski: I consume bookController in index page which is in views directory, but i when i added console.log it breaks before it resolves restFactory.getBooks().then(function(response) {. — Mad-D
– Mad-D, Commented Jan 23, 2017 at 22:01
your urls don't even match here. the first example has config.serverName+"bookshelf/rest/books/data/geRestBooks", while the second has config.serverName+"bookshelf/rest/books/data/getBooks" — Claies
– Claies, Commented Jan 23, 2017 at 22:23

GPicazo · Accepted Answer · 2017-01-23 22:41:39Z

3

If you are going to specify the method, then you should just use the $http constructor method, not the get method.

Instead of

function getBooks (){  
   return $http.get({
      cache: true,
      method: 'GET',
      url : config.serverName+"bookshelf/rest/books/data/geRestBooks"
   });
}

Try

function getBooks (){  
   return $http({
      cache: true,
      method: 'GET',
      url : config.serverName+"bookshelf/rest/books/data/geRestBooks"
   });
}

answered Jan 23, 2017 at 22:41

GPicazo

6,7263 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phil Over a year ago

Excellent catch! The reason OP's code fails is because $http.get expects the first argument to be a URL string. Since OP is passing an object, they get the string version of an object, ie [object Object]

Phil Over a year ago

Alternatively, OP could use $http.get(config.serverName+"bookshelf/rest/books/data/geRestBooks", { cache: true })

GPicazo Over a year ago

@Phil - I actually prefer your suggestion and was going to mention it, but figured I should stick to helping resolve the issue since I've been penalized for suggesting alternatives before.

Phil Over a year ago

It's hardly an alternative. Internally, $http.get just proxies through to $http with method pre-set and url added from the first argument. Feel free to add it to your answer :)

Collectives™ on Stack Overflow

Rest Webservice call in AngularJS ( promise )

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related