AngularJS then()的行为与success()不同 - error()

时间:2016-02-15 17:39:42

标签: angularjs angular-promise

由于AngularJS中不推荐success()error()函数,我正在更新我的代码,将其替换为then()。现在根据我的理解,这两段代码的行为应该相同:

$http
   .get(/* some params */)
   .success(function() {
      // success cases here
   })
   .error(function() {
      // error cases here
   });

并且

$http
   .get(/* some params */)
   .then(function() {
      // success cases here
   }, function() {
      // error cases here
   });

但在某些情况下我会有不同的行为。您能否向我解释为什么会发生这种情况,更重要的是,使用then()函数保证相同行为的方法是什么?

3 个答案:

答案 0 :(得分:5)

.success.error方法忽略返回值 因此,它们不适合链接

var httpPromise = $http
       .get(/* some params */)
       .success(function onSuccess(data, status, headers, config) {
          var modifiedData = doModify(data);
          //return value ignored
          return modifiedData;
       })
       .error(function onError(data, status, headers, config) {
          // error cases here
       });

httpPromise.then(function onFullfilled(response) {
    //chained data lost
    //instead there is a response object
    console.log(response.data); //original data
    console.log(response.status); //original status
});

另一方面,.then.catch方法返回派生的承诺 适合链接来自返回(或抛出)值或来自一个新的承诺。

var derivedPromise = $http
       .get(/* some params */)
       .then(function onFulfilled(response) {
          console.log(response.data); //original data
          console.log(response.status); //original status

          var modifiedData = doModify(response.data);
          //return a value for chaining
          return modifiedData;
       })
       .catch(function onRejected(response) {
          // error cases here
       });

derivedPromise.then(function onFullfilled(modifiedData) {
    //data from chaining
    console.log(modifiedData);
});

响应对象与四个参数

另请注意,$http服务在调用(data, status, headers, config).success方法提供的函数时,会提供四个参数 .error。< / p>

$q服务仅为提供给.then.catch方法的函数提供一个参数(响应)。对于$http服务创建的promises,响应对象具有以下属性: 1

  • data - {string | Object} - 使用转换函数转换的响应体。
  • status - {number} - 响应的HTTP状态代码。
  • headers - {function([headerName])} - Header getter function。
  • config - {Object} - 用于生成请求的配置对象。
  • statusText - {string} - 响应的HTTP状态文本。
  

链接承诺

     

因为调用promise的then方法会返回一个新的派生promise,所以很容易创建一个promise链。可以创建任何长度的链,并且由于可以使用另一个承诺(将进一步推迟其解析)来解决承诺,因此可以在链中的任何点暂停/推迟承诺的解析。这使得实现强大的API成为可能。 2

更新

已弃用.success.error方法并从AngularJS V1.6中删除。

有关详细信息,请参阅

答案 1 :(得分:2)

一个重要的区别是您应该使用.then().catch()代替.then(function(), function())。 [1]然后两个参数(其中第二个函数是错误处理程序)不会捕获第一个函数中的错误,正如我所理解的那样。 IOW:如果a()抛出错误,$http.get().then(a, b)将不会调用b(),而$http.get().then(a).catch(b)将会出现错误。

你还有哪些其他不同的行为?

1:标准化的Promise API - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

答案 2 :(得分:0)

成功函数和promise回调确实会收到不同的对象。如docs中所述,promise回调接收包含状态,标题,数据等的响应对象。success函数仅返回该对象的数据字段(响应主体)。