13

リクエストが終了したときにのみ新しいルートを表示するresolveために使用しようとしています。リクエストが成功すると、$http.post() から生じる promise が解決され、ビューがレンダリングされます。ただし、リクエストが失敗した場合 (タイムアウトや内部エラーなど)、promise は解決されず、ビューはレンダリングされません。を使用してリクエストの失敗に対処するにはどうすればよいですか?$routeProvider$httpresolve

コードの最も重要な部分は次のとおりです。

app.js

$routeProvider.when('/warrantyResult', {
    templateUrl : 'partials/warranty-result.html',
    controller : 'WarrantyResultCtrl',
    resolve : {
        response : [ 'Warranty', function(Warranty) {
            return Warranty.sendRequest();
        } ]
    }
});

controllers.js

angular.module('adocDemo.controllers', []).controller('HomeCtrl', [ '$scope', function($scope) {

} ]).controller('WarrantyCtrl', [ '$scope', '$http', '$location', 'Warranty', function($scope, $http, $location, Warranty) {
    $scope.submitWarranty = function() {
        $scope.loading = true;
        Warranty.setRequestData($scope.data);
        $location.path('/warrantyResult');
    };
} ]).controller('WarrantyResultCtrl', [ '$scope', 'Warranty', function($scope, Warranty) {

    $scope.request = Warranty.getRequestData();
    $scope.response = Warranty.getResponseData();
} ]);

services.js

angular.module('adocDemo.services', []).factory('Warranty', [ '$http', '$timeout', function($http, $timeout) {
    /**
     * This service is used to query the Warranty Webmethod. The sendRequest
     * method is automaticcaly called when the user is redirected to
     * /warrantyResult route.
     */
    var isDataSet = false;
    var requestData = undefined;
    var responseData = undefined;
    return {
        setRequestData : function(data) {
            //Setting the data
            isDataSet = true;
        },
        getRequestData : function() {
            return requestData;
        },
        sendRequest : function(data) {
            if(isDataSet) {
                var request = $http.post('url/to/webservice', requestData);
                request.success(function(data) {
                    responseData = data;
                });
                return request;
            }   
        },
        getResponseData : function() {
            return responseData;
        }
    };
} ]);

$http 呼び出しの周りにプロミスを使用して、リクエストが失敗した場合でも解決できることは知っていますが、より簡単な解決策があるかどうか疑問に思っています。

読んでくれてありがとう、うまくいけば助けてくれます:)

4

3 に答える 3

8

それを行う唯一の方法は、resolveによって返されたプロミスを手動で解決Warranty.sendRequestし、新しいプロミスでラップし直すことだと思います。

resolve : {
  response : [ 'Warranty' '$q', function(Warranty, $q) {
    var dfd = $q.defer();

    Warranty.sendRequest().then(function(result) {
      dfd.resolve({ success: true, result : result });
    }, function(error) {
      dfd.resolve({ success : false, reason : error });
    });

    return dfd.promise;

  } ]
}

ではWarrantyResultCtrl、エラーが発生したかどうかを確認し、リダイレクトを生成できました。

編集:よりクリーンなソリューション:

// WarrantyCtrl
$scope.$on('$routeChangeError', function() {
  // handle the error
});
$scope.submitWarranty = function() {
    $scope.loading = true;
    Warranty.setRequestData($scope.data);
    $location.path('/warrantyResult');
};

(プランカーデモ)

于 2013-06-10T14:54:42.330 に答える