Angularjs如何在切换路由时取消资源承诺

2024-02-20

我刚刚接触 Angularjs。我有一个问题,我认为与承诺有关。

假设我加载路由“A”,它通过其控制器发出多个 ajax 请求:

allSites = AllSites.query({ id:categoryID });

allSites.$promise.then(function(allSites){
    //add stuff to the scope and does other things 
    //(including making another ajax request)
});

然后我有路线“B”,它通过它的控制器发出自己的 API 请求:

$scope.categories = Category.query();

这是路线“A”当前使用的工厂服务:

.factory('AllSites',function($resource){
    return $resource('api/categorySites/:id');
});

当我第一次查看路线“A”,但在“A”完成加载之前切换到“B”时,路线“B”会等待“A”中最初请求的所有内容完成(实际上,发出了 query() 请求,但直到“A”中的那个解决了之后,它才会解决,此时,里面的东西.then()继续发生,尽管我不需要它,因为我现在在另一条路线上。

正如您在我的开发工具时间轴中看到的,绿线表示我切换到路线“B”的时间。直到上述两个请求完成后,路由“B”的请求才会得到解决(该请求通常非常快)。 (此时我可以作为用户使用该视图)。然后,在那之后,更多的承诺从路线“A”解决。

我到处寻找答案,只能找到那些想要“推迟”路线加载直到承诺得到解决的人。但就我而言,我几乎想要相反的情况。我想在切换时删除这些请求。

这是其他人也有同样的未解答的问题:拒绝 Angularjs 资源承诺 https://stackoverflow.com/questions/24352236/reject-angularjs-resource-promises

任何帮助表示赞赏。


首先,我决定我需要使用$http因为我找不到任何使用的解决方案$resource,我也无法让它自己工作。

所以这就是我的工厂变成的样子,基于@Sid在这里的答案,使用指南http://www.bennadel.com/blog/2616-aborting-ajax-requests-using-http-and-angularjs.htm http://www.bennadel.com/blog/2616-aborting-ajax-requests-using-http-and-angularjs.htm

.factory('AllSites',function($http,$q){

    function getSites(categoryID) {

        // The timeout property of the http request takes a deferred value
        // that will abort the underying AJAX request if / when the deferred
        // value is resolved.
        var deferredAbort  = $q.defer();

        // Initiate the AJAX request.
        var request = $http({
            method: 'get',
            url: 'api/categorySites/'+categoryID,
            timeout: deferredAbort.promise
        });

        // Rather than returning the http-promise object, we want to pipe it
        // through another promise so that we can "unwrap" the response
        // without letting the http-transport mechansim leak out of the
        // service layer.
        var promise = request.then(
            function( response ) {
                return( response.data );
            },
            function() {
                return( $q.reject( 'Something went wrong' ) );
            }
        );

        // Now that we have the promise that we're going to return to the
        // calling context, let's augment it with the abort method. Since
        // the $http service uses a deferred value for the timeout, then
        // all we have to do here is resolve the value and AngularJS will
        // abort the underlying AJAX request.
        promise.abort = function() {
            deferredAbort.resolve();
        };

        // Since we're creating functions and passing them out of scope,
        // we're creating object references that may be hard to garbage
        // collect. As such, we can perform some clean-up once we know
        // that the requests has finished.
        promise.finally(
            function() {
                promise.abort = angular.noop;
                deferredAbort = request = promise = null;
            }
        );

        return( promise );
    }

    // Return the public API.
    return({
        getSites: getSites
    });

});

然后,在我的控制器中(我的问题中的路线“A”):

var allSitesPromise = AllSites.getSites(categoryID);

$scope.$on('$destroy',function(){
    allSitesPromise.abort();
});

allSitesPromise.then(function(allSites){
    // do stuff here with the result
}

我希望工厂不要那么乱,但我会拿走我能得到的。但是,现在有一个单独的相关问题Here https://stackoverflow.com/questions/24457367/angularjs-aborted-promises-still-delay-other-promises尽管承诺被取消,但接下来的行动仍然被推迟。如果您对此有答案,可以将其发布在那里。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angularjs如何在切换路由时取消资源承诺 的相关文章

随机推荐