使用角模拟加载JSON文件以进行后台开发

Question

我在单独的.js文件中为前端后台环境编写了这个小代码。每当有ajax调用myfile.json时，我都需要得到/somelink。

angular.module('myApp')
.config(function($provide) {
  $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
})
.run(function($httpBackend, $http) {

  $httpBackend.whenGET('/somelink').respond(function(method, url, data) {
    $http({method: 'GET', url: '/somelink/myfile.json'})
    .success(function(data, status, headers, config) {
      return data;
    })
    .error(function(data, status, headers, config) {
    });

  });
});

但是，这段代码不起作用，并给出了错误：

Error: Unexpected request: GET /somelink/myfile.json

有人能帮我解决这个问题吗？

请注意，我不想直接调用$http来获取代码中的.json文件，因为这会破坏生产代码。这样做的目的是让这些代码单独用于回溯式的开发。

谢谢。

更新1:

我补充说：

$rootScope.$apply(); 
$httpBackend.flush();

现在，除了前面相同的错误之外，还有另一个错误：Uncaught Error: No pending request to flush !

更新2:

在玩完之后，我发现了一个小黑客。我把这个放在.run()中，先于所有其他的$httpBackend模拟。此外，这个.js文件必须放在所有控制器/服务/指令之前和app.js引导之后。

  var data;

  $.ajax({
    type: 'GET',
    async: false,
    url: '/somelink/myfile.json'
  }).success(function(res) {
    data = res;
  }).error(function(data) {
  });

然后是这个：

$httpBackend.whenGET('/somelink').respond(data);

关键是async: false，这样就可以确保将JSON加载到变量data中。所有这些都必须在其他对象触发和调用ajax事件之前发生。这仅仅是对前端无休止发展的一种攻击。当然，在生产时，这个.js文件将被删除。我不太喜欢这样是因为使用async: false和直接$.ajax()而不是$http

Answer 1

“跟随”为我工作，没有任何黑客。

$httpBackend.whenGET('/endpoint').respond($resource("/path/to.json").query());

礼貌https://groups.google.com/d/msg/angular/grbwk-VehDE/UBIho6qcmLMJ

Answer 2

这个问题的一个非常清晰的解决方案是使用plain vanilla JavaScript，因为$httpBackend不是用来处理asynchronous请求的。

此方法不需要jQuery 代码.

$httpBackend.when('GET', 'http://localhost:3000/api/data').respond(getData());

function getData() {
               var request = new XMLHttpRequest();
               request.open('GET', '/db/myData.json', false);
               request.send(null);

               return [request.status, request.response, {}];
}

我是从：https://stackoverflow.com/a/24287558/4742733得到这个提示的

Answer 3

我知道这是一个很晚的反应，但会分享我的经验，希望能对未来的同事有所帮助。

由于这个非常有用的博客帖子，我成功地实现了一个工作模拟后端。

首先，我将所有端点作为常量放在一个地方，以便只定义它们一次，并使它们在模拟的后端、测试中以及在所有负责AJAX调用的服务中都可用。

angular.module('appName.urls', [])
 .constant('API_endpoints', {
   login: 'authentication/login',
   logout: 'authentication/logout',
   signUp: 'authentication/signup',
   userList: 'users/list'
 });

然后，我将ngMockE2E作为依赖项添加到整个应用程序中。

angular.module('appName', [
  'ui.router',
   ... 
  'ngMockE2E'
])

然后，我为实际模拟的后端创建了一个文件，我们将其命名为fakeBackend.js，并在index.html中进行引用。该文件取自上述链接，但下面是我的实现中的一个简化示例(这里提供模拟登录)：

angular.module('appName').run(function($httpBackend, API_endpoints) {

   var credentials = {
    email : 'a@a.a',
    password : '12345'
  };

  $httpBackend.whenPOST(API_endpoints.login)
              .respond(function(method, url, data) {

    var req = JSON.parse(data),
        res;
    // very light credential check...
    if(req.email === credentials.email && req.password === credentials.password ){
        // generate a successful response
        res = [200, {uuid:1}, {}];
    } else {
        // generate an error if credentials are wrong
        res = [400, {}, {}];
    }
    return res;
  });

   // Respond to all templates request
   // Every file in states/ folder will be served automatically
   $httpBackend.whenGET(/states\//).passThrough();
}):

还请注意最后一行，它为我的states文件夹中的所有内容提供服务，我的所有模板都在这里。这显然是一个非常简单的例子，但博文作者也分享了一个非常详细和有用的普鲁克尔。