AngularJS:如何加载第一个N个JSON响应，然后在页面渲染后请求rest

AngularJS: How to load first N JSON responses and then request rest after page render

本文关键字：然后 rest 请求 响应 JSON 何加载 加载 第一个 AngularJS      更新时间：2023-09-26

我正在使用Angular从我的Rails服务器请求一个大型JSON响应。默认情况下，模板将只显示响应的前100行。为了加快页面加载，我想请求前100个JSON响应，然后在页面完成加载后请求其余的。

请注意，当前有两个AJAX调用，第一个调用被调用，它的数据被传递给第二个调用。第二个调用是我需要加速的响应，它将显示给用户。

这是我当前的控制器代码:

app.controller('clientCtrl', function($scope, $http, $cookies) {
  $scope.clients = [];
  getClients()
function getClients(){
     return $http.get("http://localhost.com:3001/authenticate.json",
       {params:
          {token: $cookies.viewing
        }})
    .success(function(data, status){
      return $http.get("http://localhost.com:3001/clients",
        {params: {
          provider_id: data.user_id,
          source: "upload"
         }})
     .success(function(provider_data, status){
       applyRemoteData(provider_data);
      });
   });
 };

  function applyRemoteData(newClients) {
    $scope.clients = newClients;
  }
});

这是我当前的相关模板代码:

 <tr ng-repeat='client in clients | limitTo:100'>
    <td>{{client.first_name}}</td>
    <td>{{client.last_name}}</td>
    <td>{{client.email}}</td>
  </tr>

如您所见，我过滤了结果并将它们限制为100(至少在最初)。我想请求前100个，这样表就可以加载，然后请求后台剩余的JSON对象(大约20K，大约需要6秒)。

你能提供的任何帮助我都非常感激。

谢谢!

在处理你的请求方面，AngularJS真的没有什么特别的。你所需要做的就是:

  1. 调整您的Web服务/clients调用，使其可以接受范围参数。
  2. 调整您的客户端代码，以便将此参数与其他参数一起传递。也许你想让它成为一个方法参数，比如function getClients(max)。
  3. 调整getClients结果处理程序回调以合并、替换或附加结果数据。如果你想要超级高效，你应该让它只认证一次。
  4. 调整初始呼叫通过该参数(getClients(100))

  5. 在没有max(0)的情况下再次调用getClients . setTimeout:

    setTimeout(function() {
    // Now load the rest, but we've drawn the UI by now...
    getClients(0);
}, 250);

你可能还想看看https://github.com/YuzuJS/setImmediate，这是一个很好的替代setTimeout。它使用各种浏览器技巧来获得一个近乎即时的回调，如果你希望它尽可能快。

相关文章：