Question

用例：用户创建新任务，必须通过API向上游发送。当该API返回成功时，我将其添加到范围以供显示。我的工作正常：

$http.post('some_url', newtask).success(function(data) {
  $scope.tasks.push(data);
});

（newtask是前面定义的一个简单对象，此处未显示）。

问题是，API非常慢（虽然可靠），而我希望这感觉就像一个实时应用程序。因此，我想立即将新任务推送到$ scope，然后在API返回成功时将其替换为“真实”。所以我在前面加上：

$scope.tasks.push(newtask); // Add to UI immediately (provisionally)

现在发生的事情是立即添加新任务，然后在API返回时添加任务的第二个副本。所以我想要做的是在添加第二个副本后立即删除第一个副本。

我似乎无法找到一种方法来做到这一点。或者我的方法都错了？（我承认，这种方法确实有点像黑客，所以我愿意接受建议。）

Answer 1

在成功回调函数中，我建议您将新任务（从API返回）与任务数组中的最后一个任务进行比较。如果匹配，则无需执行任何操作。（如果它们不匹配，则需要删除最后一项并抛出某种错误指示。）

$http.post('some_url', newtask).success(function(data) {
   if($scope.tasks[$scope.tasks.length-1] === data) {
      // do nothing, we already added it before
   } else {
     ... error handling here
   }
});

如果用户不能一次添加多个任务（在API返回之前），并且您确实要删除然后添加，只需使用数组上的常规JavaScript操作删除最后一项，然后添加API值：

$http.post('some_url', newtask).success(function(data) {
    $scope.tasks.pop();
    $scope.tasks.push(data);
});

Angular应注意模型更改并自动为您更新视图。

Answer 2

//Push the new task immediately
$scope.tasks.push(newtask);

//When API return check for error if error just pop out the added task
$http.post('some_url', newtask).success(function(data) {
    if($scope.tasks[$scope.tasks.length-1] !== data) {
        $scope.tasks.pop();
    } 
});

Angular：推送，然后删除一个项目

2 个答案: