AngularJ的http请求优先级和http拦截器

时间:2019-06-07 11:09:53

标签: angularjs http

我一直在查看我前阵子创建的应用程序,并且在特定页面中最后加载了详细信息。因此,它似乎正在排队请求(之前还有六个以上的请求),这导致页面变慢。

我认为我可以找到一种解决方案来对这些请求进行优先排序,而我发现了这一点:

How to prioritize requests in angular $http service?

所以我创建了它的版本并将其添加到拦截器中:

// Add our auth interceptor to handle authenticated requests
$httpProvider.interceptors.push('authInterceptor');
$httpProvider.interceptors.push('httpPriorityInterceptor');

拦截器如下:

function factory($injector, $q) {
    var requestStack = [], // request stack
        $http = null; // http service to be lazy loaded

    return {
        request: request,
        responseError: responseError
    };

    //////////////////////////////////////////////////

    function request(config) {
        // Lazy load $http service
        if (!$http) {
            $http = $injector.get('$http');
        }

        if (!config.hasBeenRequested) {
            config.hasBeenRequested = true;
            config.priority = config.priority || 3;

            console.log(config);

            // add a copy of the configuration
            // to prevent it from copying the timeout property
            requestStack.push(angular.copy(config));

            // sort each configuration by priority
            requestStack = requestStack.sort(sort);

            // cancel request by adding a resolved promise
            config.timeout = $q.when();
        }

        // return config
        return config;
    }

    function responseError(rejection) {
        // check if there are requests to be processed
        if (requestStack.length > 0) {
            requestStack.reduceRight(function(promise, config) {
                return promise.finally(function() {
                    return $http(config);
                });
            }, $q.when());

            requestStack.length = 0;
        }

        // return rejected request
        return $q.reject(rejection);
    }

    //////////////////////////////////////////////////

    function sort(config1, config2) {
        return config1.priority < config2.priority;
    }
}

问题是,它似乎也正在拦截模板请求。我对此没有问题,但他们没有解决。相反,我得到了很多错误:

  

错误:[$ templateRequest:tpload]无法加载模板:app / accounts / accounts.html(HTTP状态:-1)

以前有人遇到过吗?有什么我可以解决的吗?

1 个答案:

答案 0 :(得分:1)

您应该知道,每个请求(例如html文件,css文件和...)都会进入拦截器。 在您的情况下,您无需确定此文件的优先级。因此您可以像这样过滤您的请求:

if (config.url.toString().toLowerCase().includes("api")) {
    //place your functionality
}