Angular $ http附加数据作为对象

Question

我正在尝试使用angularjs从soundcloud API获取曲目列表.
我试图发送的参数是:
1)client_id(字符串)
2)持续时间(具有两个属性的对象).

这是代码:

    var CLIENT_ID = 'a81f01ef5d0036415431e8be76c8db0e';
    var TRACKS_URL = 'https://api.soundcloud.com/tracks.json';

    var app = angular.module('soundcloud', []);

    app.controller('tracksController', function ($scope, $http) {

        $http({
            url: 'https://api.soundcloud.com/tracks.json',
            method: 'GET',
            data: {
                client_id: CLIENT_ID,
                duration: { // in milliseconds
                    from: 300000,
                    to: 400000
                }
            }
        })
            .success(function (data) {
                $scope.trackList = data;
            })
            .error(function () { alert('error'); });
    });

当我在broweser的调试器中检查请求时,根本无法识别这些参数.

我尝试使用'params'代替'data',但这样它将'duration'对象变为json - >然后我得到状态500作为响应.
当我只在params发送client_id时,它工作正常,因为没有对象,只有字符串.

jQuery的ajax方法工作正常:https://jsfiddle.net/oacwz1up/3/

我该怎么办 ？如何正常发送参数？
请帮忙!谢谢!

Answer 1

发生这种情况是因为Angular以不同于JQuery的方式序列化请求参数.

Angular 1.4将解决paramSerializer在$http config对象(和on $httpProvider.defaults)上引入属性的这个问题.这可以用于任意序列化请求参数(对于所有或特定请求).

请注意,该功能仅在此后可用v1.4.0-rc.0.

除了默认的序列化程序(将对象转换为JSON字符串)之外,还有一个模拟JQuery的额外内置序列化程序param():$ httpParamSerializerJQLike.

你可以像这样使用它:

$http.get(<API_URL>, {
  params: {...},
  paramSerializer: '$httpParamSerializerJQLike'
});

另见这个简短的演示.

如果您使用的是旧版Angular,则可以执行以下操作之一:

1. 自己构造整个URL(包括查询字符串)(可能使用$http请求拦截器自动将其应用于所有请求).

2. 将params保持为平面格式,这将导致Angular按预期序列化它们:

   var REQ_PARAMS = {
     client_id: 'a81f01ef5d0036415431e8be76c8db0e',
     'duration[from]': 200000,
     'duration[to]': 205000
   };