angularjs - 在呈现任何 View 或激活 Controller 之前，在 ui 路由中进行条件解析

Question

经过两天的研究和失败的理解 promise 和 $q，我将描述我的问题我创建了使用外部 API 的服务

.factory('Product', function($http, BASEURL) {
    return {
        get: function(id) {
            return $http.get(BASEURL + '/products/' + id);
        }
    };
})

其中一个状态是产品状态，我可以使用代码解析产品:

.state('app.product', {
    url: '/product/:id',
    resolve: {
        productData: function(Product, $stateParams) {
            return Product.get($stateParams.id)
            }
    },
    templateUrl: 'templates/product.html',
    controller: 'ProductCtrl'
})

但是，如果找不到 id 的产品，我需要将用户重定向到“产品不存在创建新”状态API 返回状态 404。

在获取所有所需数据之后、 Controller 呈现状态之前，解析 block 中是否可以使用“if 语句”？

这是我失败的方法

function productData($q, Product, $stateParams, $state) {
    var deferred = $q.defer();
    Product.get($stateParams.id)
    .then(function(result) {
        if (result.status != 404) { //the service responds with full response not the "API response" 
            deferred.resolve(result);
            return deferred.promise;
        } else {
            $state.go('app.notFound');

        }
    });
}

我也需要对其他资源进行相同的错误处理

我也尝试过通过直接访问 api 来在没有服务的情况下实现它，它有点工作

.state('app.product', {
    url: '/product/:id',
    resolve: {
        productData: checkProductExists
    },
    templateUrl: 'templates/product.html',
    controller: 'ProductCtrl'
})

function checkProductExists($q, $stateParams, $state, $http) {

    var deferred = $q.defer();
    $http.get('https://example.com/api/products/id' + $stateParams.id)
        .success(function(response) {
            if (response.status_code != 404) { //the $http responds with "API response" where i have custom error status codes
                deferred.resolve(response);
            } else {
                deferred.reject();
                $state.go('app.notFound');
            }
        })
        .error(function() {
            deferred.reject();
            $state.go('app.notFound');
        });
    return deferred.promise;

};

Answer 1

Product Factory 中的 $http.get 返回一个 promise ，该 promise 应允许您的 resolve 访问 GET 请求的结果。

按照您目前的方式，productData 持有的是 promise ，而不是您的实际数据。

Refer to the Promise API

then(successCallback, errorCallback, notifyCallback) – regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.

尝试将您的resolve修改为类似的内容

.state('app.product', {
    url: '/product/:id',
    resolve: {
        productData: function(Product, $stateParams) {
            Product.get($stateParams.id).then(function (response) { 
                // successCallback for .then()
                return response.data;
            }, function (error) { 
                // errorCallback for .then() 
                return {};
            });
        }
    },
    templateUrl: 'templates/product.html',
    controller: 'ProductCtrl'
})

现在您可以在 ProductCtrl 中注入(inject) productData 并按照您喜欢的方式处理数据，也许可以这样做 $state.go('app.notFound'); 如果 productData 为空或类似内容