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

当我在浏览器的调试器中检查请求时，这些参数根本无法识别。

我尝试使用“参数”而不是“数据”，但这样它会将“持续时间”对象转换为 json --> 然后我得到状态 500 作为响应。
当我只在参数中发送 client_id 时，它工作正常，因为没有对象，只有字符串。

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

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

Answer 1

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

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

请注意，自 v1.4.0-rc.0 以来，该功能仅可用。

---

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

你可以这样使用它:

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

另请参阅此 short demo .

---

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

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

2. 将参数保持为扁平格式，这将导致 Angular 按预期序列化它们:

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