销毁状态更改的异步请求答案

【问题标题】：Destroy asynchronous request on state change销毁状态更改的异步请求
【发布时间】：2019-11-21 09:28:53
【问题描述】：

我正在使用 AngularJS 并且我有一个状态 dashboard 并且控制器请求一个项目数组。

var promise = itemsRestService.fetchAllitems();

promise.then(
    function(response){
        itemService.sortItems(response);
        $scope.dashboardData = response;
        $state.go('dashboard.content', {items: response}, {reload: false});
        vm.dashboardLoaded = true;

    }
)

如您所见，一旦 promise 返回，它会将用户引导至子状态 dashboard.content。

promise 可能需要几秒钟才能解决，如果我在请求中单击导航项以更改状态，我将被定向到新状态，但是当 promise 解决时，它会将我重定向回dashboard 状态（这是预期的）。

问题

如何取消状态 $destroy 的承诺？

【问题讨论】：

不能取消承诺（除非您使用像 BluebirdJS 这样的第三方库），但您是否可以显示一个加载器以防止用户在加载时单击导航项，或者在执行之前检查当前视图你的$state.go?
这是一个解决方案，但忽略状态变化，当处于另一个状态时，promise 仍然会解决。我将不得不检查当前状态。谢谢

标签： javascript angularjs promise

【解决方案1】：

https://docs.angularjs.org/api/ng/service/$http:

timeout - {number|Promise} - 以毫秒为单位的超时，或承诺解决后应该中止请求。

控制器：

vm.canceler = $q.defer();
...
const config = {timeout: canceler.promise};
$http.get(`url`, config);
...

vm.$onDestroy = () => {
  vm.canceler.resolve();
}

【讨论】：

仅代码的答案在本网站上通常不受欢迎。您能否编辑您的答案以包含一些 cmets 或对您的代码的解释？解释应该回答这样的问题：它有什么作用？它是如何做到的？它去哪儿了？它如何解决OP的问题？请参阅：How to anwser。谢谢！
@EduardoBaitello 猜测代码的唯一答案比带有错误陈述的赞成评论要好得多。这里的代码也很容易解释，但 nvm 添加了一些文本。
嗨@Petr。我同意该解决方案应该作为答案陈述，而不是在 cmets 中......尽管如此，您的问题是flagged as Low Quality，我只是关注good practices 来审查它。感谢您添加一些上下文，这可以防止有人误解评论并将您的问题标记为删除。

【解决方案2】：

可以查看$scope.$$destroyed的值：

var promise = itemsRestService.fetchAllitems();

promise
  .then(function(response) {
    if ($scope.$$destroyed) throw "Scope destroyed";
    //ELSE
    return response;
}).then(function(response){
        itemService.sortItems(response);
        $scope.dashboardData = response;
        $state.go('dashboard.content', {items: response}, {reload: false});
        vm.dashboardLoaded = true;    
})

如果$scope 已被销毁，则promise 将被拒绝并避免链中后续的.then 块。

【讨论】：