AngularJS 中的多个 JSONP XHR 请求失败答案

【问题标题】：Multiple JSONP XHR requests in AngularJS failingAngularJS 中的多个 JSONP XHR 请求失败
【发布时间】：2014-05-21 12:17:42
【问题描述】：

我有一个网络应用程序，它向不同的网络服务发出多个 XHR 请求。我在拨打Federal Register API 时遇到问题。从文档here 它建议：

简单的 JSONP 接口也是可能的；只需添加一个callback=foo 任何 URL 末尾的 CGI 参数以准备好结果跨域 JavaScript 消费

基于Angular docs，我需要使用&callback=JSON_CALLBACK。

我已按照与此视图中的其他 jsonp 调用完全相同的方式设置此请求，但联邦公报调用返回错误 Unexpected token :。 JSON 正在通过，它被包装在一个由 Angular 定义的函数中：articles.json?angular.callbacks._4，这是我所期望的。也许我犯了一个简单的错误，但据我所知，这就像我的其他 XHR 请求一样设置。

从控制台：

我的服务：

angular.module('atRiskApp.services')

.factory('FederalRegister', [ '$http', function ($http) {
    var searchRegisterByName = function ( sciName ) {
        var url = 'http://www.federalregister.gov/api/v1/articles.json?per_page=20&order=newest&conditions%5Bterm%5D=' + sciName + '&callback=JSON_CALLBACK';
        var promise = $http.jsonp( url );
        return promise;
    };

    return {
        searchRegisterByName: searchRegisterByName
    }
}]);

控制器：

FederalRegister.searchRegisterByName($scope.codes.sciName).then(function (response) {
  $scope.registerDocs = response.data;
});

编辑： 这是URL for a sample API call。数据正确包装在 JSON_CALLBACK();怎么了？？

编辑 2： API 有一个form for constructing API calls。我看到 API 返回的内容类型是 application/json 而不是 application/javascript 这会导致问题吗？

【问题讨论】：

XHR 和 JSONP 是互斥的，使用一个或另一个。公平地说，您可以对返回进行字符串处理以去除 JSONp 部分，但何必呢？
我对 ajax 请求比较陌生，所以请原谅我的无知。为什么在这种情况下我无法获取响应对象？

标签： javascript ajax angularjs jsonp

【解决方案1】：

我意识到我添加到 URL 的组件没有被编码。这导致 API 调用中包含一个空间。无论出于何种原因，API 调用成功返回 JSONP，但我仍然收到错误。

在进行 api 调用之前，我将服务中的 URL 切换为对科学名称进行编码：

angular.module('atRiskApp.services')

.factory('FederalRegister', [ '$http', function ($http) {
    var searchRegisterByName = function ( sciName ) {
        var url = 'http://www.federalregister.gov/api/v1/articles.json?per_page=20&order=newest&conditions%5Bterm%5D=' + encodeURIComponent(sciName) + '&callback=JSON_CALLBACK';
        return $http.jsonp( url );
    };

    return {
        searchRegisterByName: searchRegisterByName
    }
}]);

url 声明中的关键位是encodeURIComponent(sciName)。

【讨论】：