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

问题描述

有些事情让我发疯；也许有人可以帮助我解决以下问题?:

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

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

$http({方法:'POST'，网址:网址，标头:{'Content-Type':'application/x-www-form-urlencoded'}，转换请求:this._transformRequest，数据:表单数据}).成功(功能(数据){//bla bla 不相关}).错误(函数(错误){//bla bla 不相关});

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

$http({方法:'POST'，网址:网址，标头:{'Content-Type':'application/x-www-form-urlencoded'}，转换请求:this._transformRequest，数据:表单数据}).然后(功能(响应){//不相关}, 函数(错误){//不相关});

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

<块引用>

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

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

<块引用>

com.bank.token.session=XXXXXXXXXXX&model=%7B%22data%22%3A%7B%22relatieRol%22%3A%22AANVRAGER%22%2C%22evaUitgevoerdDat%22%3Anull%2C%22sfhDat%2voerd3Anull%2C%22bkrUitgevoerdDat%22%3Anull%7D%2C%22status%22%3A200%2C%22config%22%3A%7B%22method%22%3A%22POST%22%2C%22transformResponse%22%3A5D%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；但它似乎不起作用.有谁知道为什么?非常感谢！

我的 transformRequest 函数如下所示:

 _transformRequest: 函数 (obj) {var str = [];for (var p in obj) {如果(obj.hasOwnProperty(p)){str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));}}console.log('transform:', str.join("&"));返回 str.join("&");}

解决方案

success and error unpack data> 响应的属性(以及通往漂亮名字的路线).因此，如果您更改为 then，您需要手动处理响应的 data 属性以获得相同的信息:

$http({方法:'POST'，网址:网址，标头:{'Content-Type':'application/x-www-form-urlencoded'}，转换请求:this._transformRequest，数据:表单数据}).然后(功能(响应){var data = response.data;//不相关}, 函数(错误){var data = error.data;//不相关});

这是$http 文档中的相关部分:><块引用>

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

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

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

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

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%22bkrUitgevoerdDat%22%3Anull%2C%22bkrBekendCd%22%3A%22GOED_BEKEND%22%7D

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

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!

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

Here is the relevant part in the $http documentation:

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} – 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屋！