关于Angular post请求后台API的一些问题

在使用angular 请求后台api的时候，使用post方式请求会有一些问题。
这是一个标准的表单和angular $http请求后台api的例子

index.html

    

        

             
                Username
            
            
        
        

             
                Password
            
            
        
        Submit
    

app.js

module.exports = ($scope, $http, config) => {

    $scope.isValid = false;

    $scope.submitForm = ( isValid ) => {

        // 验证通过
        if ( isValid ) {

            // 提交表单 之后禁用按钮 防止重复提交
            $scope.isValid = true;

            let promise = $http ({
                method: 'post',
                url:    config.api.supplier,
                data:   $scope.form
            })
            promise.then( ( res ) => {
                console.log('success')
                console.log( res )
            }, ( res ) => {
                console.log('error')
                console.log( res )
            })
        }

        
    }
}

我们使用内置的http服务直接同外部进行通信。http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。不过封装的有几个问题，我们正常的使用$http post方式请求api，会产生错误。状态码是200，但是后台没有返回且如下报错。

chrome错误提示

我们可以看出是请求头信息出错，需要在angular定义请求头信息，建议定义在全局中 因为项目中不是一个地方需要用到post请求。我们在angular的入口js里面添加
httpProvider.defaults.headers.post = {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"} 由于angular内置的http没有设置此HTTP请求提交的内容类型，所以我们需手动设定，这样设定之后我们能成功的请求到后台api了。但是，又发现一个问题，我们发送的formData格式是这样的，后台无法处理这样的数据。

我们发现这样的格式是不对的 是把整体的数据做为键了(JQuery下的ajax是正常的)。后来查到这里还需自己手动处理一下这样的格式 在$http下的参数transformRequest设置处理函数。

transformRequest: function(obj){

var str = [];

for( var p in obj )
{

    str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));

}

return str.join("&");

}

最终代码

module.exports = ($scope, $http, config) => {

    $scope.isValid = false;

    $scope.submitForm = ( isValid ) => {

        // 验证通过
        if ( isValid ) {

            // 提交表单 之后禁用按钮 防止重复提交
            $scope.isValid = true;

            let promise = $http ({
                method: 'post',
                url:    config.api.supplier,
                data:   $scope.form,
                transformRequest: function(obj){
                    var str = [];
                    for( var p in obj )
                    {   
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                }
            })
            promise.then( ( res ) => {
                console.log('success')
                console.log( res )
            }, ( res ) => {
                console.log('error')
                console.log( res )
            })
        }

        
    }
}

最好将这个处理格式的方法放到angular的服务里 以便其他地方调用

app.service('services', function() {

    this.postParam = function(x) {

        return $.param(x);

    }

})

app.js里即可使用 services.postParam的方法调用。