AngularJS $ http POST请求与当时和成功不同的结果

Question

有些东西让我疯狂; 也许有人可以帮我解决以下问题？:

我正在使用AngularJS 1.2.26(因为需要支持IE8)

我必须调用一些最初为骨干前端构建的后端服务.我设法通过以下方式做到这一点:

$http({
  method: 'POST',
  url: url,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  transformRequest: this._transformRequest,
  data: formData
})
.success(function (data) {
  // bla bla not relevant
}).error(function (error) {
  // bla bla not relevant
});

现在我尝试使用then函数,因为我发现更多结果,所以我将代码更改为:

$http({
  method: 'POST',
  url: url,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  transformRequest: this._transformRequest,
  data: formData
}).then(
  function (response) {
    // not relevant
  }, function (error) {
    // not relevant
  });

根据我的说法,理论上这应该与初始实现具有相同的结果,但令我惊讶的是,现在请求在服务器上失败了.在调试时我注意到转换请求函数的结果在成功处理的请求中的两个场景和错误中都会产生非常不同的结果,转换请求的结果如下:

com.bank.token.session = XXXXX&模型=%7B%22relatieRol%22%3A%22AANVRAGER%22%2C%22evaUitgevoerdDat%22%3Anull%2C%22sfhUitgevoerdDat%22%3Anull%2C%22bkrUitgevoerdDat%22%3Anull%2C%22bkrBekendCd %22%3A%22GOED_BEKEND%22%7D

当我使用'then'函数作为处理结果的方式时,transformRequest函数返回以下(错误)结果:

com.bank.token.session = XXXXXXXXXXX型号=%7B%22data%22%3A%7B%22relatieRol%22%3A%22AANVRAGER%22%2C%22evaUitgevoerdDat%22%3Anull%2C%22sfhUitgevoerdDat%22%3Anull%2C%22bkrUitgevoerdDat %22%3Anull%7D%2C%22status%22%3A200%2C%22config%22%3A%7B%22method%22%3A%22POST%22%2C%22transformResponse%22%3A%5Bnull%5D%2C%22url %22%3A%22http%3A%2F%2Flocalhost%2Femployee%2Findex.html%2Ffoo幅%2Fxchannel-FOO安全的portlet%2F1598792178%2Fver%3D2.0%2Fresource%2Fid%3Dfoo-fetch-%2Frparam% 3Dportal%3DfooPortal.wsp%22%2C%22headers%22%3A%7B%22Content型%22%3A%22application%2FX WWW的形式进行了urlencoded%22%2C%22Accept%22%3A%22application%2Fjson% 2C%20text%2Fplain%2C 20%*%*2F%22%7D%2C%22data%22%3A%7B%22com.bank.token.会话%22%3A%22XXXXXXXXXX%22%2C%22model%22%3A%22%7B%5C%22relatieRol%5C%22%3A%5C%22AANVRAGER%5C%22%7D%22%7D%7D%2C% 22statusText%22%3A%22OK%22%2C%22bkrBekendCd%22%3A%22GOED_BEKEND%22%7D

这真让我感到惊讶; $ http服务上的处理程序如何影响请求的处理方式？我想用'then'来处理我的$ http POST; 但似乎没有用.谁知道为什么？提前谢谢了!

我的transformRequest函数如下所示:

        _transformRequest: function (obj) {
            var str = [];
            for (var p in obj) {
                if (obj.hasOwnProperty(p)) {
                    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
            }

            console.log('transform: ', str.join("&"));
            return str.join("&");
        }

Answer 1

success并为您error 解包data响应的属性(以及路由到漂亮的名称).因此,如果您更改为then需要手动处理data响应的属性以获取相同的信息:

$http({
  method: 'POST',
  url: url,
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  transformRequest: this._transformRequest,
  data: formData
}).then(
  function (response) {
    var data = response.data;
    // not relevant
  }, function (error) {
    var data = error.data;
    // not relevant
  });

以下是$ http文档中的相关部分:

使用标准then方法和两个http特定方法返回promise对象:success和error.then方法使用两个参数成功,并使用响应对象调用错误回调.成功和错误方法采用单个参数 - 在请求成功或失败时将分别调用的函数.传递给这些函数的参数是传递给then方法的响应对象的析构表示.响应对象具有以下属性:

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