AngularJS后台开发模板的“意外请求”问题

Question

我正在做一个项目，当前端实现正在进行时，需要对后端进行嘲弄。

我有一个gulp结构，它只为测试和为开发服务源代码加载/**/*.mock.js文件。我使用这个.mock.js文件模拟测试数据和服务，并拦截用于后台开发的http调用。该文件如下所示：

(function() {
  'use strict';

  var mockResponseData = {
    'mock': 'data'
  };

  angular
    .module('module.name')
    .value('mockResponseData', mockResponseData)
    .config(config)
    .run(run);

  /** @ngInject */
  function config($provide) {
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
  }

  /** @ngInject */
  function run($httpBackend) {

    $httpBackend.whenPOST(/\/api\/path\/$/)
      .respond(function() {
        return [200, mockResponseData];
      });

    $httpBackend.whenGET(/^\w+.*/).passThrough();
    $httpBackend.whenPOST(/^\w+.*/).passThrough();
    $httpBackend.whenPUT(/^\w+.*/).passThrough();
    $httpBackend.whenDELETE(/^\w+.*/).passThrough();
  }

})();

正如您所看到的，我已经应用了.passThrough() (这是解决Unexpected request问题的常见解决方案)，当只存在这样一个.mock.js文件时，它就能正常工作。创建第二个文件后，Unexpected request错误开始出现：

Error: Unexpected request: GET 'path/to/template.html'

在尝试了一些事情之后，我意识到问题可能与我注射$httpBackend的方式有关。为了避免它被注入到dist文件中，并保持项目结构模块化，我必须通过$provide将其注入，而不是直接在需要它的每个模块的定义中注入它。这是在上面代码的config块中完成的。

如果将$provide.decorator(...)行从除一个.mock.js文件之外的所有文件中删除，则一切都会再次正常工作(除了删除了行的文件中的运行块将开始抱怨不存在的$httpBackend，但这不是这里的问题)。

你知道这可能是什么吗？

提前感谢！

P.S.：我不能错过模块化结构，.mock.js文件不能包含在dist构建中。

Answer 1

所以，我已经解决了这个问题，现在我在这里回答，供将来参考。

基本问题是，我使用$httpBackend方法注入了$provide.decorator()服务，根据文档，该方法的工作方式如下：

将服务装饰器注册到$injector。服务装饰器拦截服务的创建，允许它覆盖或修改服务的行为。装饰器返回的对象可以是原始服务，也可以是替换或包装并委托给原始服务的新服务对象。

这样的服务注入是必要的，以避免注入它时，它将不会被使用，但不知怎的，如果您装饰这个服务两次，AngularJS会感到困惑，并开始抛出问题中描述的错误。

因此，解决方案是为主模块创建一个.mock.js文件。这样，它将只注入一次服务，并避免出现问题：

(function() {
  'use strict';

  angular
    .module('mainModuleName')
    .config(config);

  /** @ngInject */
  function config($provide) {
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
  }

})();

请注意，您仍然可以在服务中添加更多的装饰师，如下所示：

$provide.decorator('$httpBackend', function($delegate, $injector) {
  // Your decorator...
});

只要您不多次注入angular.mock.e2e.$httpBackendDecorator。