javascript - 如何避免 JavaScript/AngularJS 中的 HTTP 请求竞争条件？

Question

我将 JavaScript 与 AngularJS 结合使用，最近遇到了一些与 HTTP 请求竞争条件有关的问题。

出于演示目的，我将尝试稍微简化问题: 假设您有多个 scope.$watch 监听器正在运行，其中一些可能会不时触发一些 REST 调用。

现在，这些监听器可能会相互触发一些逻辑，最终您会以不同参数对同一 url 进行两次 REST 调用，而同时第一次调用的参数已过时(所有这些都发生在几毫秒内)。这两个回调本质上也是相同的，并且会覆盖我的 Controller 或其他任何变量中的一些变量“结果”。

只要两个请求在服务器上花费相同的时间，它们就会以相同的顺序返回，因此第二次调用的结果将覆盖第一次调用的结果，一切都很好。 然而，我们当然不能保证会发生这种情况，所以我们最终会遇到一个丑陋的竞争条件。

所以，现在我想知道是否有任何“最佳实践”或“设计模式”或其他“技巧”来首先避免此类问题。

我读过有关取消 ajax 请求的文章并尝试了该解决方案 - 不幸的是，它在 AngularJS 中不像在纯 jQuery 中那样容易，而且我的应用程序的结构并不真正支持这种解决方案。 然而，即使我使用 ajax 取消，我仍然会对相应的设计模式感兴趣，因为取消挂起的请求并不总是您想在应用程序中执行的操作。

对于我的项目，一个可行的解决方案是记住每当我进行此类有问题的调用时最后的请求参数是什么，并且仅当且仅当最后使用的请求参数等于用于给定调用的请求参数时才解析结果，换句话说:

• 用参数=1调用f --> 记住 1
• 用参数=2调用f --> 记住 2，因此覆盖 1
• 第二次调用返回 --> 检查使用的参数 (2) 是否等于最后使用的参数 (2) --> 解决
• 第一次调用返回 --> 检查使用的参数 (1) 是否等于最后使用的参数 (1) --> 不解析

好吧，这在我的上下文中适用于我的程序，但当然它并不总是适用。有时您需要可以选择同时使用两个不同的参数进行两次相同类型的调用，而您的代码不会拒绝它...

再说一次:你们首先知道这个问题的任何好的解决方案吗？请启发我... :D

Answer 1

我会使用 promise chaining。

• 用参数=1 调用 f --> 记住 1
• 调用 f 参数为 2 --> chain from 1

然后作用域将仅在 1 解决后由 2 更新。

var httpPromise1 = $http(params1).then ( function onFulfilled(response) {
    $scope.data = response.data; //data set #1
});

//start second request
var startXHRpromise = $http(params2);

//chain fulFillment
var httpPromise2 = httpPromise1.then (function() {
    //chain with started XHR promise
    return startXHRpromise; 
}).then (function onFulfilled(response) {
    $scope.data = response.data; //data set #2
});

通过链接 promise ，第二个数据集仅在第一个数据集之后放在范围内。

由于一个 promise 可以用另一个 promise 解决(这将进一步延迟其解决)，因此可以在链中的任何点暂停/延迟解决 promise。这使得实现强大的 API 成为可能。 ¹