如何在 AngularJS $http 中处理较长的响应时间？答案

【问题标题】：How to handle long response times in AngularJS $http?如何在 AngularJS $http 中处理较长的响应时间？
【发布时间】：2020-10-16 02:47:46
【问题描述】：

我有一个从 API 获取一些数据的方法。

$http.get("https://httpstat.us/200?sleep=20000", header).then(
  function successCallback(response) {
    //logic
  },
  function errorCallback(response) {
    
  }
);

在某些测试用例中，API 需要很长时间才能响应，所以我需要一种方法来处理这种情况。如果 API 耗时超过 10 秒，我需要返回一些数据。我尝试使用下面的代码为请求添加超时

$http.get("https://httpstat.us/200?sleep=20000", {timeout: 10000}).then(

但这只是中止请求并转到错误回调。是否有另一种方法可以知道请求是否需要永远响应而不实际超时？

【问题讨论】：

标签： angularjs api http

【解决方案1】：

Short anwser no，没有内置方法来通知 http 服务侦听器请求很长。

但是，您可以构建一个延迟包装器，将 http 调用封装在延迟中，这样您就可以在服务响应时间过长时通知您的侦听器，但您必须自己安排时间。

看看这篇文章，作者解决了与你类似的问题

https://www.peterbe.com/plog/angularjs-$q-notify-resolve-local-get-proxy

【讨论】：

【解决方案2】：

如果您只需要在一段时间后运行一个函数，您可以使用$timeout。将您要运行的函数传递给$timeout，时间以毫秒为单位，它将返回一个计时器承诺。如果您的$http 调用解决了之前超时，只需运行$timeout.cancel(\[promise\]) 并将其传递给您的计时器承诺。这将取消内部超时函数调用。

例子

var timer = $timeout(function() {
  console.log("this request is taking too long...")
  // tell the client it will take a while ...
}, 10 * 1000);

$http({method: $scope.method, url: $scope.url, cache: $templateCache}).
  then(function(response) {
    // handle successful response ...
    $timeout.cancel(timer); // about your timeout function call
  }, function(response) {
    // handle rejection ...
});

您当然可以在 finally 子句中取消超时。 (Plunker)

如果您不想为包装$http 的每个函数编写相同的代码，请考虑使用interceptor。

【讨论】：