未知提供者：AngularJS應用程序中的$ q

Question

任何人都可以告訴我我可能做錯了什么。 我有這個代碼：

var app = angular.module('app',
[
    'angular-cache',
    'angular-loading-bar',
    'ngAnimate',
    'ngCookies',
    'pascalprecht.translate',
    'ui.router',
    'ui.bootstrap'  
])

app.config([
    '$httpProvider',
    '$q',
    ($httpProvider,
        $q) => {
    $httpProvider.interceptors.push(
        function () {
            return {
                'request': function (config) {
                    return config;
                },
                // optional method
                'requestError': function (rejection) {
                    return $q.reject(rejection);
                },
                // optional method
                'response': function (response) {
                    return response;
                },
                // optional method
                'responseError': function (rejection) {
                    return $q.reject(rejection);
                }
            }
        })
}])

當它運行時，我收到消息：

未捕獲錯誤：[$ injector：modulerr]由於以下原因無法實例化模塊應用程序：錯誤：[$ injector：unpr]未知提供程序：$ q http://errors.angularjs.org/1.5.0/ $ injector / unpr？p0 =％24q at http：// localhost：1828 / lib / angular / angular.js:68:12 at http：// localhost：1828 / lib / angular / angular.js：4397：19 at getService（ http：// localhost：1828 / lib / angular / angular.js：4550：39 ） atAjects （ http：// localhost：1828 / lib / angular / angular.js：4574：58 ）at Object.invoke（ http：// localhost： 1828 / lib / angular / angular.js：4596：18 ）在runInvokeQueue（ http：// localhost：1828 / lib / angular / angular.js：4497：35 ）at http：// localhost：1828 / lib / angular / angular.js：4506：11 atEach （ http：// localhost：1828 / lib / angular / angular.js：321：20 ）at loadModules（ http：// localhost：1828 / lib / angular / angular.js：4487） ：5 ）在createInjector（ http：// localhost：1828 / lib / angular / angular.js：4409：19 ） http://errors.angularjs.org/1.5.0/ $ injector / modulerr？p0 = app＆p1 =錯誤％3A％20％...％20（HTTP％3A％2F％2Flocalhost％3A1828％2Flib％2Fangular％2Fangular.js％3A44 09％3A19）

當我注釋掉所有這些代碼並運行我的應用程序時它工作，我沒有收到此錯誤消息。

Answer 1

您可以將服務注入配置塊。 但是您可以使用函數的工廠服務作為攔截器。 已有工廠示例，因此我將提供另一個功能解決方案：

app.config(['$httpProvider', ($httpProvider) => {
    $httpProvider.interceptors.push(['$q', function($q) {
        return {
            'request': function(config) {
                return config;
            },
            // optional method
            'requestError': function(rejection) {
                return $q.reject(rejection);
            },
            // optional method
            'response': function(response) {
                return response;
            },
            // optional method
            'responseError': function(rejection) {
                return $q.reject(rejection);
            }
        }
    }])
}])

Answer 2

您只能將提供程序注入配置塊，因為它在加載任何服務之前運行。 $q是一項服務，因此在該代碼塊運行時未定義。

Answer 3

您不能將$q作為提供者注入。 相反，在工廠中定義攔截器，然后將其推$httpProvider.interceptors config $httpProvider.interceptors 。 請注意以下內容......

.config(['$httpProvider', function($httpProvider) {

    $httpProvider.interceptors.push('testInterceptor');
}]);

---

.factory('testInterceptor', ['$q', function($q) {

    return {
        'request': function (config) {
             return config;
         },
         'requestError': function (rejection) {
             return $q.reject(rejection);
         },
         'response': function (response) {
             return response;
         },
         'responseError': function (rejection) {
              return $q.reject(rejection);
         }
    }
}]);

JSFiddle Link - 演示