Angular js同时从多个表中获取数据

Question

这不是一个关于我陷入困境的问题。这是一个关于良好实践和表现的问题。我的代码工作正常。但我想知道做这个任务的正确方法。也许我是对的。只要看看场景和代码，请给我建议正确的方法。

要求

我有近数据库约20桌，当用户登录并转至仪表板页面，我需要从所有表显示的数据。不需要显示所有数据，因此我使用Angular $ http从每个表中获取25行并在仪表板页面中显示。

代码

我的角的js代码是：

$scope.$on('$viewContentLoaded', function (event) { 

     $scope.loadDashboardQue(event, '/route1/getDashboardData?user_id=123', 'table1'); 

     $scope.loadDashboardQue(event, '/route2/getDashboardData?user_id=123', 'table2'); 

     $scope.loadDashboardQue(event, '/route3/getDashboardData?user_id=123', 'table3'); 

     $scope.loadDashboardQue(event, '/route4/getDashboardData?user_id=123', 'table4'); 

     $scope.loadDashboardQue(event, '/route5/getDashboardData?user_id=123', 'table5'); 

     $scope.loadDashboardQue(event, '/routeN/getDashboardData?user_id=123', 'tableN'); 
}); 

现在loadDashboardQue功能界定及

$scope.loadDashboardQue = function (event, url, tableName) { 
    $http.get(url) 
     .success(function (response) { 
      if (response.status === 'success') { 
       //Assigning data to HTML table 
       if (tableName === 'table1') { 
        $scope.table1Data = response.data; 
       } 
       if (tableName === 'table2') { 
        $scope.table2Data = response.data; 
       } 
       if (tableName === 'table3') { 
        $scope.table3Data = response.data; 
       } 
       if (tableName === 'table4') { 
        $scope.table4Data = response.data; 
       } 
       if (tableName === 'table5') { 
        $scope.table5Data = response.data; 
       } 
       if (tableName === 'tableN') { 
        $scope.tableNData = response.data; 
       } 
      } else { 
       console.log("Something wrong while fetching data from table ", tableName); 
      } 
     }) 
     .error(function (error) { 
      console.log("The error is :", err); 
     }); 
}); 

HTML表格

<table style="width:100%"> 
    <tr> 
    <th>Nme</th> 
    <th>Id</th> 
    <th>Contact No</th> 
    </tr> 
    <!--Table1 Data--> 
    <tr ng-repeat="data in table1Data"> 
    <td>{{ data.user_name }}</td> 
    <td>{{ data.user_id }}</td> 
    <td>{{ data.mobile }}</td> 
    </tr> 
    <!--Table2 Data-->  
    <tr ng-repeat="data in table2Data"> 
    <td>{{ data.customerName }}</td> 
    <td>{{ data.customerId }}</td> 
    <td>{{ data.phone }}</td> 
    </tr> 
    <!--Table3 Data-->  
    <tr ng-repeat="data in table3Data"> 
    <td>{{ data.student_name }}</td> 
    <td>{{ data.roll_no }}</td> 
    <td>{{ data.mobile }}</td> 
    . 
    . 
    . 
    <!--TableN Data-->  
    <tr ng-repeat="data in tableNData"> 
    <td>{{ data.developer_name }}</td> 
    <td>{{ data.id }}</td> 
    <td>{{ data.mobile }}</td> 
    </tr> 
</table> 

您可以在每张表格中看到列名称不同，因此我无法在单个ng-repeat中显示所有数据。所以我已经为每个表格分别编写了ng-repeat。

此代码工作正常，但当页面开始加载它需要超过7秒所以这是我的担心（性能明智）。所以请建议我是否有更好的方法来实现这一点。

感谢您宝贵的时间。

Answer 1

的合并请求

创建你的API一个新的终点，将所有表中获取数据，并在一个请求返回。这一定会为你节省一些时间，特别是如果你的请求是跨域的。

以下内容不会加速您的应用程序，但您询问了有关最佳做法的问题。

摘要API调用服务

尽量避免在您的控制器使用的$ HTTP。控制器不应该关心如何获取数据，只需要知道如何获取数据以及如何处理数据。

地图结果

如果你想在你的模板中使用单NG重复，每个结果映射（或结果的一部分，如果你合并所有的请求），所以对象的结构是为每个表相同。以下是table1的简化示例。

$scope.tableData = []; 

result.data.forEach(row => { 
    $scope.tableData.push({ 
     id: row.user_id, 
     mobile: row.mobile, 
     name: user_id 
    }); 
}); 

这样，您可以使用一个ng-repeat循环遍历所有表格数据。

使用$ q.all（）

这仅适用，如果你不能合并你API级别要求。在你的例子中，你正在手动调用该功能25次。它将使意义做一个for循环，从1到25和PU每个请求到一个数组：

const promises = []; 

for (let i = 1; i <= 25; i++) { 
    promises.push(loadDashboardQue(YOUR_ARGS_HERE)); 
} 

在此之后，你可以等待它们全部解决，并访问响应其结果将由数组按照您将请求推送到promises变量的顺序排列。

$q.all(promises).then(response => { 
    // response[0] is table1data etc... 
}); 

我希望这对你有帮助。如果您有问题，请告诉我。