AngularJS如何将两个功能重复的API合并为一个？

我来帮你把这两个API调用合并成一个，让代码更简洁易维护～

第一步：先统一后端API端点 #

首先你需要和后端同学配合，把两个功能一致的API合并成一个端点，比如统一为 xyz/api/att/view。这个端点的逻辑设计成：

• 如果没有传递日期/员工参数，默认返回当日的员工考勤数据；
• 如果传递了startdate、enddate和employee参数，就返回对应日期范围的指定员工数据。

如果后端暂时没法调整，也可以先在前端做兼容，但长远来看后端统一端点是更优的方案。

第二步：重构前端代码 #

接下来我们把前端的两个API调用逻辑合并成一个可复用的函数，初始化和用户主动查询时都调用这个函数：

重构后的完整代码 #

app.controller("attCtrl", ['$scope', '$filter', '$http', function ($scope, $filter, $http) {
    jQuery("body").on("focus", ".time-input", function () {
        if (!jQuery(this).data('xdsoft_datetimepicker')) {
            jQuery(this).datetimepicker({
                onGenerate: function () {
                    if (!jQuery(this).hasClass('initial')) {
                        jQuery(this).addClass('initial').triggerHandler('open.xdsoft');
                    }
                }
            });
        }
    });

    $scope.empattendance = [];
    $scope.empDetails = [];

    // 统一的考勤数据获取函数，支持默认和带参数两种场景
    $scope.fetchEmpAttendance = function (queryParams) {
        let requestConfig = {};
        // 如果有传入参数，处理日期格式后放到GET请求的params里
        if (queryParams) {
            requestConfig.params = {
                startdate: queryParams.startdate.slice(0, -6),
                enddate: queryParams.enddate.slice(0, -6),
                employee: queryParams.employee
            };
        }

        $http.get('xyz/api/att/view', requestConfig)
            .then(function (result) {
                console.log('考勤数据获取成功:', result);
                $scope.empattendance = result.data.result;
                // 初始化时返回的result1字段也保留赋值
                if (result.data.result1) {
                    $scope.empDetails = result.data.result1;
                }
            }, function (error) {
                console.error('考勤数据获取失败:', error);
            });
    };

    // 页面初始化时调用，默认获取当日数据
    $scope.fetchEmpAttendance();

    // 用户选择日期/员工后触发的查询函数
    $scope.getEmpAttendance = function () {
        const queryParams = {
            startdate: jQuery('#start').val(),
            enddate: jQuery('#end').val(),
            employee: $scope.selectedItem
        };
        $scope.fetchEmpAttendance(queryParams);
    };
}]);

关键改动说明 #

1. 统一API调用入口：新增fetchEmpAttendance函数，作为所有考勤数据请求的唯一入口，避免重复代码；
2. 处理GET请求参数：原来的代码直接把参数对象作为$http.get的第二个参数是错误的，GET请求的参数需要放到配置对象的params属性中，这样才会正确拼接到URL上；
3. 兼容两种场景：
   • 初始化时无参数调用，后端返回当日数据；
   • 用户查询时传递参数，后端返回指定范围数据；
4. 优化错误日志：把普通的console.log改成console.error，更便于排查问题；
5. 保留原有逻辑：初始化时的empDetails赋值逻辑也保留，确保原有功能不受影响。

额外小提示 #

你原来代码里第二个API的URL是xyz/api/att/view/today，这和“获取选定日期”的功能有点矛盾，应该是笔误，统一后改成合并后的端点即可。

内容的提问来源于stack exchange，提问作者Sai Manoj