AngularJS $ http POST请求不同的结果，然后成功 [英] AngularJS $http POST request different results with then and success

问题描述

某事使我发疯；也许有人可以帮我解决以下问题? :

Something is driving me nuts; maybe someone can help me out with the following? :

我正在使用 AngularJS 1.2.26 (必须这样做是因为需要支持IE8)

I am using AngularJS 1.2.26 (have to because IE8 needs to be supported)

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

I have to invoke some backend services that were initially build for a backbone frontend. I managed to do that in the following way:

$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函数，因为我发现结果更加重要，所以我将代码更改为:

Now i try to work with the then function as i find that more consequent, so i change the code into:

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

根据我的观点，从理论上讲，这应该与初始实现具有相同的结果，但是令我惊讶的是，现在该请求在服务器上失败了.在调试时，我注意到转换请求函数的结果在两种情况下在成功和错误处理的请求中提供了截然不同的结果，转换请求的结果如下:

According to me, in theory this should have the same result as the initial implementation, however to my surprise the request now fails on the server. While debugging I noticed that the result of the transform request function delivers a very different result in both scenario's in the request that is handled with success and error the result of transform request is as follows:

com.bank.token.session = XXXXX& model =％7B％22relatieRol％22％3A％22AANVRAGER％22％2C％22evaUitgevoerdDat％22％3Anull％2C％22sfhUitgevoerdDat％22％3Anull％2C％22b％ 3Anull％2C％22bkrBekendCd％22％3A％22GOED_BEKEND％22％7D

com.bank.token.session=XXXXX&model=%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函数将返回以下(错误的)结果:

When i use the 'then' function as the way to handle the result the transformRequest function returns the following (wrong) result:

com.bank.token.session = XXXXXXXXXXX& model =％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-web％2Fxchannel-foo-secure-portlet％2F1598792178％2Fver％3D2.0％2Fresource％2Fid％3Dfoo- fetch-％2Frparam％3Dportal％3DfooPortal.wsp％22％2C％22headers％22％3A％7B％22Content-Type％22％3A％22application％2Fx-www-form-urlencoded％22％2C％22Accept％22％3A ％22application％2Fjson％2C％20text％2Fplain％2C％20 *％2F *％22％7D％2C％22data％22％3A％7B％22com.bank.token.session％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

com.bank.token.session=XXXXXXXXXXX&model=%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-web%2Fxchannel-foo-secure-portlet%2F1598792178%2Fver%3D2.0%2Fresource%2Fid%3Dfoo-fetch-%2Frparam%3Dportal%3DfooPortal.wsp%22%2C%22headers%22%3A%7B%22Content-Type%22%3A%22application%2Fx-www-form-urlencoded%22%2C%22Accept%22%3A%22application%2Fjson%2C%20text%2Fplain%2C%20*%2F*%22%7D%2C%22data%22%3A%7B%22com.bank.token.session%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；但似乎不起作用.有人知道为什么吗?提前非常感谢！

This really surprises me; how can the handler on the $http service influence the way the request is handled? I would like to use 'then' for handling my $http POST; but it seems not to work. Anybody knows why? Many thanks in advance!

我的transformRequest函数看起来像这样:

my transformRequest function looks like this:

        _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("&");
        }

推荐答案

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

success and error unpack the data property of the response for you (as well as route to the pretty names). So, if you change to then you need to manually address the data property of the response in order to get the same information:

$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文档中的相关部分:

Here is the relevant part in the $http documentation:

返回带有标准then方法和两个http的Promise对象 具体方法:成功与错误. then方法需要两个 参数成功和错误回调，将使用 响应对象.成功和错误方法仅需一个参数 -分别在请求成功或失败时将调用的函数.传递给这些函数的参数是 传递给的响应对象的结构化表示 然后方法.响应对象具有以下属性:

Returns a promise object with the standard then method and two http specific methods: success and error. The then method takes two arguments a success and an error callback which will be called with a response object. The success and error methods take a single argument - a function that will be called when the request succeeds or fails respectively. The arguments passed into these functions are destructured representation of the response object passed into the then method. The response object has these properties:

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

• data – {string|Object} – The response body transformed with the transform functions.
• status – {number} – HTTP status code of the response.
• headers – {function([headerName])} - Header getter function.
• config – {Object} – The configuration object that was used to generate the request.
• statusText – {string} – HTTP status text of the response.

这篇关于AngularJS $ http POST请求不同的结果，然后成功的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！