AngularJS后续$http删除将保持挂起状态几分钟

AngularJS subsequent $http deletes stay in pending for minutes

本文关键字：挂起状态 分钟 几分钟 后续 http 删除 AngularJS      更新时间：2023-09-26

我有一个显示对象列表的表，每个对象都与任意数量的子对象相关联。我正在使用 Angular 1.2.20、Express 4.6.1 和节点 0.10.25。该表有一个"删除"按钮，该按钮调用两个 API 调用：

1） 删除所选对象2） 删除与所选对象关联的子对象

第一个删除工作正常 - 两个 API 调用快速返回 DELETE 200。但是，随后对表的删除尝试会导致 API 调用在 Chrome 和 Firefox 中几分钟内不返回。Safari似乎工作得很好，奇怪的是。如果我继续尝试删除更多表项目，则页面将停止响应任何输入，直到我刷新浏览器。我可以看到 $http.pendingRequests 中的请求已满，直到几分钟后它们才会被刷新，即便如此，它们也会小批量刷新。

就好像 angularjs 没有放弃最初的 API 调用，这会导致后续的 API 调用备份。不知道为什么这在Safari中有效，但不适用于Chrome或Firefox。该API只是带有MongoDB的ExpressJS，但是即使我只是为删除调用实现了一个空的ExpressJS控制器函数，问题仍然存在：

exports.delete = function(req, res) {
    /*FormDistributionGroup.remove({_id: req.params.distGroupId},
        function(err, distGroup) {
            if(err) {
                return res.json(500, err);
        } else {
            return res.json(distGroup);
        }
    });*/
    return res.json({});
}

以下是"删除"按钮的视图代码：

<button class="btn btn-sm btn-danger" ng-click="removeDistsByGroup(distGroup._id)">Remove</button>

以下是"删除"按钮的控制器代码：

$scope.removeDistsByGroup = function(distGroupId) {
            var promises = [];
            promises.push(FormDistributionGroupService.delete(distGroupId));
            promises.push(FormDistributionService.deleteByDistGroupId(distGroupId));
            $q.all(promises).then(function() {
                window.alert("Successfully removed distribution group.");
                $scope.distGroupList = $scope.distGroupList.filter(function(distGroup) {
                    return distGroup._id != distGroupId;
                });
            });
        }

下面是控制器调用的两个关联的服务函数：

表单分发服务：

        deleteByDistGroupId: function(groupDistId) {
            return $http.delete(distributeJsonPath + '/group-dist/' + groupDistId).then(function(res) {
                return res.data;
            });
        }

表单分发组服务：

        delete: function(id) {
            return $http.delete(distributeJsonPath + '/' + id).then(function(res) {
                return res.data;
            });
        },

由于您正在使用延迟对象，因此您需要使用每个方法返回正确的事件链。看看角度文档：https://docs.angularjs.org/api/ng/service/$q

它可能看起来像这样： 

deleteByDistGroupId: function(groupDistId) {
    var deferred = $q.defer();
    $http.delete(distributeJsonPath + '/group-dist/' + groupDistId).then(function(res) {
        deferred.resolve(res.data);
    });
    return deferred.promise;
}

delete: function(id) {
    var deferred = $q.defer();
    $http.delete(distributeJsonPath + '/' + id).then(function(res) {
         deferred.resolve(res.data);
    });
    return deferred.promise;
},
使用带有

延迟承诺的$timeout似乎有所帮助，但这只是取消承诺。

这似乎有很大帮助：

remove: function(id) {
            var deferred = $q.defer();
            $http.delete(distributeJsonPath + '/' + id, {timeout : deferred.promise}).then(function(res) {
                return res.data;
            });
            $timeout(function() {
                deferred.resolve();
            }, 5000);
        },

我认为潜在的问题仍然存在。

相关文章：