sce - AngularJS utiliza un interceptor para manejar $ http 404s-prometer error no definido

angularjs http post example with parameters

Question

Tengo una aplicación Angular, para la cual quiero manejar 404s desde un punto final de API. Los componentes clave son así:

// app.js

var myApp = angular.module(''myApp'', [''ngRoute'',]);

myApp.config( function ($httpProvider, $interpolateProvider, $routeProvider) {
  $httpProvider.interceptors.push(''httpRequestInterceptor'');

  $routeProvider
    ...
    .when(''/project/:projectId'', {
        templateUrl : ''partials/project_detail.tmpl.html'',
        controller: ''ProjectDetailCtrl'',
        resolve: {
            project: function ($route, ConcernService) {
                return ConcernService.get(''projects/'', $route.current.params.projectId);
            },
        }
    });
});


// interceptors.js

myApp.factory(''httpRequestInterceptor'', function ($q, $location) {
  return {
    response: function(response){
      return promise.then(
        function success(response) {
          return response;
        },
        function error(response) {
          if(response.status === 404){
            $location.path(''/404'');
            return $q.reject(response);
          }
          else{
            return $q.reject(response); 
          }
        }
      );
    }
  };
});


// services.js

myApp.factory(''ConcernService'', function ($http, $q) {

var ConcernService = {
    ...
    get: function (items_url, objId) {
        var defer = $q.defer();
        $http({method: ''GET'', 
            url: api_url + items_url + objId}).
            success(function (data, status, headers, config) {
                defer.resolve(data);
            }).error(function (data, status, headers, config) {
                // when API not found, status == 404 
                console.log(''ConcernService.get status'',status);
                defer.reject(status);
            });
        console.log(''ConcernService.get promise'',defer.promise);
        return defer.promise;
    },
}
});

El problema es que estoy recibiendo un error de ReferenceError: promise is not defined at response . ¿Es esto porque el ConcernService difiere la promise ? ¿Cómo debo lidiar con esto?

Answer 1

Creo que la estructura de tu interceptor podría estar apagada. Publiqué una respuesta con un interceptor de muestra aquí ( Manejar la respuesta HTTP 302 del proxy en angularjs ) que podría encontrar útil. Funciona para mí a diario.

Answer 2

Entonces, mi solución que funciona, usando la nueva sintaxis de interceptor es la siguiente:

// interceptors.js

.factory(''httpRequestInterceptor'', function ($q, $location) {
    return {
        ''responseError'': function(rejection) {
            // do something on error
            if(rejection.status === 404){
                $location.path(''/404/'');                    
            }
            return $q.reject(rejection);
         }
     };
});


// app.js

myApp.config( function ($httpProvider, $interpolateProvider, $routeProvider) {
    $httpProvider.interceptors.push(''httpRequestInterceptor'');

    $routeProvider
    ...
    .when(''/404/:projectId'', {
        templateUrl : ''partials/404.tmpl.html'',
        controller: ''404Ctrl'',
        resolve: {
            project: function ($route) {
                // return a dummy project, with only id populated
                return {id: $route.current.params.projectId};
            }
        }
    });
});


// 404.tmpl.html

...

<h1>Oh No! 404.</h1> 
<p>Project with ID {{ project.id }} does not exist.</p>

Esta es una versión simplificada, pero demuestra cómo usé el patrón interceptor para resolver mi problema.

Los comentarios son bienvenidos.

Answer 3

Es más fácil pasar el parámetro como

<div class="fullPortfolio" ng-show="projectId.length">Project Id passed</div>

y luego cuando el ID del proyecto no existe

<div class="fullPortfolio" ng-show="!projectId.length">Project Id is not exist</div>