当超时和流产发生在$ http.get中时

angularjs 1.6.6支持XHR完成，错误，流产，超时之间的差异化，我有此代码片段，该代码段向URL提出了以下内容：

：

$http.get(url, {timeout: 1000})
  .then(...)
  .catch(function(error) {
       console.log(error.xhrStatus) // could be abort, complete, error and timeout
   });

当请求我的API需要超过1秒时，"流产"的xhrStatus拒绝了承诺，我想知道在哪种情况下我会得到'timeout'和'错误'状态文本？

edit ：如果答案在Web API中提供相关的服务器端代码

，那将很棒

"超时"将永远不会说，因为$ httpbackend中的xhr从来没有超时属性集，而是Angular使用其自己的机制，如果超时，则可以中止XHR请求MS到期或在决议中通过的承诺。

https://github.com/angular/angular.js/blob/master/src/ng/httpbackend.js#l165

"错误"将发生，并且网络连接已下降

如果500或200回来，则状态将完成，但Angular会根据状态代码在HTTP承诺上发射成功或错误/捕获处理程序。

{
  "msg1": {
    "data": {
      "val": "test"
    },
    "status": 200,
    "config": {
      "method": "GET",
      "transformRequest": [
        null
      ],
      "transformResponse": [
        null
      ],
      "jsonpCallbackParam": "callback",
      "timeout": 1000,
      "url": "test1.php",
      "headers": {
        "Accept": "application/json, text/plain, */*"
      }
    },
    "statusText": "OK",
    "xhrStatus": "complete"
  },
  "msg2": {
    "data": null,
    "status": -1,
    "config": {
      "method": "GET",
      "transformRequest": [
        null
      ],
      "transformResponse": [
        null
      ],
      "jsonpCallbackParam": "callback",
      "timeout": 1,
      "url": "test2.php",
      "headers": {
        "Accept": "application/json, text/plain, */*"
      }
    },
    "statusText": "",
    "xhrStatus": "abort"
  },
  "msg3": {
    "data": null,
    "status": -1,
    "config": {
      "method": "GET",
      "transformRequest": [
        null
      ],
      "transformResponse": [
        null
      ],
      "jsonpCallbackParam": "callback",
      "url": "test3.php",
      "headers": {
        "Accept": "application/json, text/plain, */*"
      }
    },
    "statusText": "",
    "xhrStatus": "error"
  },
  "msg4": {
    "data": "",
    "status": 500,
    "config": {
      "method": "GET",
      "transformRequest": [
        null
      ],
      "transformResponse": [
        null
      ],
      "jsonpCallbackParam": "callback",
      "url": "test4.php",
      "headers": {
        "Accept": "application/json, text/plain, */*"
      }
    },
    "statusText": "Internal Server Error",
    "xhrStatus": "complete"
  }
}

test.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script>
<script>
angular.module('myApp', [])
  .controller('MyCtrl', function($http){
    var url1 = "test1.php";
    var url2 = "test2.php";
    var url3 = "test3.php";
    var url4 = "test4.php";
    var ctrl = this;
    ctrl.model={msg1:null, msg2:null, msg3:null, msg4:null}
    $http.get(url1, {timeout: 1000})
      .then(function(resp){
        ctrl.model.msg1 = resp
      })
      .catch(function(error) {
        ctrl.model.msg1 = error;
      });
    $http.get(url2, {timeout: 1})
      .then(function(resp){
        ctrl.model.msg2 = resp
      })
      .catch(function(error) {
        ctrl.model.msg2 = error;
      });
    setTimeout(function(){
    $http.get(url3)
      .then(function(resp){
        ctrl.model.msg3 = resp
      })
      .catch(function(error) {
        ctrl.model.msg3 = error;
      });
    }, 2000);
    $http.get(url4)
      .then(function(resp){
        ctrl.model.msg4 = resp
      })
      .catch(function(error) {
        ctrl.model.msg4 = error;
      });

  });
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl as myCtrl">
<pre>{{myCtrl.model|json}}</pre>
</body>
</html>

test1.php

<?php
echo "{"val":"test"}";

test2.2.php

<?php
sleep(10);

test3.php

<?php
sleep(1000);

test4.php

<?php
throw new Exception("Error");

相关内容

最新更新

热门标签：