Problems with the $http interceptor


#1

I have a lot of http promise and I used the http interceptor to put a loading screen in all my http. I based it on the ionic turoials. I just added requestError and responseError so that it doesn’t load infinitely if the http has a response error. And it works.

.config(function($httpProvider) {
  $httpProvider.interceptors.push(function($rootScope, Utilities) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show');
        return config;
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide');
        return response;
      },
      requestError: function(config) {
        $rootScope.$broadcast('loading:hide');
        return config;
      },
      responseError: function(response) {
        $rootScope.$broadcast('loading:hide');
        return response;
      }
    };
  });
})

Now for my problem. After implementing the http interceptors, my promises don’t ever go to the function(err) part of my code anymore. They always go to the function after the then. I think it is because the http intercepted all errors. Is there another way for both codes to work?

Exams.getUserAnswered(examObj).query().$promise.then(function(queryUserAnswered) {
        console.log("data: "+JSON.stringify(queryUserAnswered));
    },function(err){
        //handle error
        console.log("getUserAnswered error");
    });

#2

Could you explain where Exams.getUserAnswered(examObj).query().$promise comes from and how it works.


#3

It is in my service as a factory,

.factory('Exams', function($resource){
  return {
    getUserAnswered: function(userExamId) {
            return $resource(
                mainUrl+'user-exams/'+userExamId.id+'/answers', {},
                {'query': {method: 'GET'}}        
            );
        }
}

#4

i suggest you to use $http instead of $resource

.factory('Exams', function($http) {
  return {
    getUserAnswered: function(userExamId) {
        return $http.get(mainUrl+'user-exams/'+userExamId.id+'/answers');
    }
  }
});

It returns a working promise by default --> so you can simply do that:

Exams
  .getUserAnswered(examObj)
  .then(function(queryUserAnswered) {
    console.log("data: "+JSON.stringify(queryUserAnswered.data));
  }, function(err) {
    //handle error
    console.log("getUserAnswered error");
  });

PS: wrap your code in 3-` chars :wink:


#5

How to store data with mongo database using ionic


#6

I tried your implementation but it still goes to the first function instead of the second function

   Exams.getUserAnswered(examObj).then(function(queryUserAnswered) {
        console.log("data: "+JSON.stringify(queryUserAnswered));
    },function(err){
        console.log("getUserAnswered error");
    });
.factory('Exams', function($http) {
  return {
getUserAnswered: function(userExamId) {
            return $http.get(mainUrl+'user-exams/'+userExamId.id+'/answers');
        },
  }
});

What’s “3-` chars”?


#7

It’s not working fully. Any other option?

Thanks
Scott Brook


#8

if you do not get in the second function --> no errors occurs, so your requests are working? what’s your problem with that

to the 3-` --> edit your last post and take a look around the source codes


#9

I tried two tries, one a fixed url and the second on a broken url. On both times they only go to the

      console.log("data: "+JSON.stringify(queryUserAnswered));

ah, I see the 3-` are used for spacing codes