Question

这不是关于我遇到困难的问题。这是一个关于良好实践和表现的问题。我的代码工作正常。但我想知道完成这项任务的正确方法。也许我已经是对了。只需查看方案和代码，请以正确的方式建议我。

要求

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

代码

My Angular 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-repeat，请映射每个结果（如果合并所有请求，则映射结果的一部分），以使每个表的对象结构相同。以下是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次。从1到25进行for循环并将每个请求放入数组中是有意义的：

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...
});

我希望这能以某种方式帮助你。如果您有疑问，请告诉我。

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

1 个答案: