取消HTTP请求并以角度解决错误功能答案

【问题标题】：Canceling HTTP request and resolving error function in angular取消HTTP请求并以角度解决错误功能
【发布时间】：2015-11-21 10:42:40
【问题描述】：

您好，我想在 2 秒后取消我的 http 请求。如果没有收到数据，它应该解析为错误函数并返回一个空对象。

我知道我必须以某种方式使用 timeout 属性。我到底在哪里使用 $timeout ？我不太确定我是否理解正确。

app
  .service('testService',['$http','$q','$timeout',
    function($http,$q,$timeout){

      var canceler=$q.defer();

      this.options = function (long,lat) {


        return $http({
          method: 'POST',
          url: '/coordinates',
          headers: {
            'Content-Type' : 'application/json; charset=utf-8',
            'Data-Type': 'json'
          },
          data: {
            "long":long,
            "lat": lat
          },
          timeout:canceler.promise

        }).then(function (response) {
          return response.data;
        },function(error){
          return {};
        });
      };
    }]);

【问题讨论】：

标签： javascript angularjs http promise angular-promise

【解决方案1】：

在你的 $timeout 中使用reject

$timeout(function(){
    return canceler.reject(reason);
},2000);

所以，你的$http 请求看起来像：

var timeoutCase = function(){
    $timeout(function(){
        return canceler.reject(reason);
    },2000);
}

var apiCall = function(){

   // call timeout function
   timeoutCase();

   // http call
   return $http({
      method: 'POST',
      url: '/coordinates',
      headers: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Data-Type': 'json'
      },
      data: {
        "long":long,
        "lat": lat
      },
      timeout:canceler.promise

    }).then(function (response) {
$timeout.cancel(timeoutCase);
      return response.data;
    },function(error){
      return {};
    });
}

// call Http function.
api().then(function(response){
    console.log(response);
})

【讨论】：

太棒了...工作正常。不知道为什么我想不出我们自己...很大的帮助

【解决方案2】：

您可以将配置对象传递给您正在使用的方法（在您的场景 POST 中）：

post(url, data, [config]);

在配置对象中你可以指定一个超时属性：

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

因此，您的 POST 方法调用示例如下：

$http.post('www.host.com/api/resource', {payload}, {timeout:2000})
          .then(function(){ //success });
          .catch(function(){ return {};});

return {}; 只是为了模拟你提到的空对象。

在 angular 文档网站上有一些使用 $http 服务的好例子

另一方面，$timeout 是 window.setTimeout 的 Angular 包装器，这里是 documentation 的链接。

所以您可以使用 $timeout 来触发解决您的取消承诺，或者只是让 timeout 属性在执行请求时完成它的工作。那将取决于您的要求。但我的建议是对您正在执行的请求使用 timeout 属性。无需通过外部计时器取消请求。

【讨论】：

【解决方案3】：

您可以使用 $timeout 来实现这一点。您根据哪个先结束取消 http 请求或超时承诺。如果首先发生超时，则取消 http 请求，如果 http 承诺在超时之前解决，则取消超时。这是一个例子：

var httpPromise = $http({
          method: 'POST',
          url: '/coordinates',
          headers: {
            'Content-Type' : 'application/json; charset=utf-8',
            'Data-Type': 'json'
          },
          data: {
            "long":long,
            "lat": lat
          }
        });

var timeoutPromise = $timeout(function () {
      httpPromise.reject("Timeout occurred"); // timeout occurred first, reject httpPromise.
}, 2000);

return httpPromise.then(function(data){
   $timeout.cancel(timeoutPromise); //http request resolved before timeout occurred, cancel the timeout.
   return data;
});

【讨论】：