Angular: $http.get() 每秒只触发一次 onpopstate 触发器

Question

我有一个 AngularJS 应用程序可以调用 API 和 returns 一堆数据，然后用户可以按标签过滤这些数据以获得更精细的结果。每次点击标签过滤数据时，应用程序都会进行新的 $http.get() 调用，并使用适当的查询参数修改 URL 以便用户可以保存永久链接并返回到任何特定的数据集。

我正在尝试使用 window.history.pushState() 为应用程序提供适当的历史记录处理，并将每个历史记录对象的相关查询参数作为状态数据传递。我正在使用 window.onpopstate 来检测何时单击 back/forward 按钮，并使用它来使用历史记录中的相关状态数据进行新的 $http.get() 调用。

出于某种原因，$http.get() 函数仅在每秒 popstate 触发一次，然后进行两次调用。好像正在进行一些缓存，但我一直无法找到罪魁祸首。这种行为在两个方向上持续存在，向后和向前，并且始终是每隔一秒发生一次。我已验证 window.history.length 仅针对每个标记 added/removed 递增 1，状态数据已成功发送，新的搜索查询已正确组装，并且请求路径正确。它只是不开火。怎么回事？？

为了说明，行为流程如下所示：

在 /default 加载页面
- 添加第一个标签：URL是/default&tags=a，$http.get() returns新数据
- 添加第二个标签：URL是/default&tags=a,b，$http.get() returns新数据
- 添加第三个标签：URL是/default&tags=a,b,c，$http.get()returns新数据
- 添加第四个标签：URL是/default&tags=a,b,c,d，$http.get()returns新数据
第一个后退按钮事件
- window.onpopstate 触发，URL 现在是 /default&tags=a,b,c
- 无网络变化
第二个后退按钮事件
- window.onpopstate 触发，URL 现在是 /default&tags=a,b
- $http.get() 触发，使用 /default&tags=a,b,c
- $http.get() 再次触发，使用 /default&tags=a,b
- /default&tags=a,b 负载的数据集
第三个后退按钮事件
- window.onpopstate 触发，URL 现在是 /default&tags=a
- 无网络变化
第四个后退按钮事件
- window.onpopstate 触发，URL 现在是 /default
- $http.get() 触发，使用 /default&tags=a
- $http.get() 再次触发，使用 /default
- /default 负载的数据集

相关代码片段：

$scope.apiRequest = function(options, callback) {

    // Omitted: a bunch of functions to build query
    // based on user-selected tags.
    // I've verified that this is working correctly.

    $http.get(path)
      .then(function(response) {
        console.log('http request submitted');
        if (callback) {
          callback(response.data.response, response.data.count, response.data.facets);
          console.log('data returned');
        }
      }, function(response) {
          console.log('there has been an error');
     });
}

成功事件和错误事件均未触发。我试过使用 $http.get().then().catch() 来查看是否还有其他事情发生，但由于某种原因，我的控制台中不断出现错误，提示 ...catch() 不是有效函数，它在本身就令人困惑。有什么想法吗？

谢谢！

Answer 1

这听起来表明函数没有在 $digest 循环中循环。在这种情况下，您可以尝试将 $scope.$apply(); 添加为 window.onpopstate 处理程序函数的最后一行，以启动 $digest 循环来执行您的函数调用。

这篇文章，Notes On AngularJS Scope Life-Cycle 帮助我更好地理解了 $digest 循环以及如何使用 $scope.$apply(); 将 $digest 循环强制到运行请记住，您想谨慎使用 $scope.$apply()，但在某些情况下，您被迫开始循环，尤其是使用异步回调时。

Angular: $http.get() 每秒只触发一次 onpopstate 触发器

Angular: $http.get() only fires every second onpopstate trigger

javascript

http-get

pushstate

angularjs

popstate