AngularJS then() 的行为不同于 success()-error() [英] AngularJS then() behaves differently than success()-error()

问题描述

由于 success() 和 error() 函数在 AngularJS 中被弃用，我正在更新我的代码，将它们替换为 then().现在根据我的理解，这两段代码的行为应该是一样的:

As the success() and error() functions are deprecated in AngularJS, I am updating my codes, replacing them with then(). Now according to my understanding, these two pieces of codes should behave identically:

$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() 函数保证相同行为的方法是什么?

But in some cases I am getting different behavior. Can you please explain to me why would that happen, and more importantly, what would be the way to guarantee the identical behavior using then() functions?

推荐答案

.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 方法返回一个派生承诺 适合链接来自返回(或抛出)值或来自新承诺.

On the otherhand, the .then and .catch methods return a derived promise suitable for chaining from returned (or throw) values or from a new promise.

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);
});

响应对象 vs 四个参数

另请注意，$http 服务在调用提供给的函数时提供 四个参数 (data, status, headers, config).success 和 .error 方法.

Response Object vs Four Arguments

Also notice that the $http service provides four arguments (data, status, headers, config) when it invokes the function provided to the .success and .error methods.

$q 服务仅向提供给 .then 或 .catch<的函数提供一个参数(响应)/代码> 方法.对于由 $http 服务创建的承诺，响应对象具有以下属性:1

The $q service only provides one argument (response) to the functions provided to the .then or .catch methods. In the case of promises created by the $http service the response object has these properties:¹

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

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

Chaining promises

Because calling the then method of a promise returns a new derived promise, it is easily possible to create a chain of promises. It is possible to create chains of any length and since a promise can be resolved with another promise (which will defer its resolution further), it is possible to pause/defer resolution of the promises at any point in the chain. This makes it possible to implement powerful APIs.²

<小时>

更新

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

---

Update

The .success and .error methods have been deprecated and removed from AngularJS V1.6.

有关更多信息，请参阅

• 为什么不推荐使用 angular $http 成功/错误方法吗?已从 v1.6 中删除?.

这篇关于AngularJS then() 的行为不同于 success()-error()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！