javascript - AngularJS 中的多个 JSONP XHR 请求失败

Question

我有一个 Web 应用程序，可以向不同的 Web 服务发出多个 XHR 请求。我在调用 Federal Register API 时遇到问题。来自文档here它建议:

A simple JSONP interface is also possible; simply add a callback=foo CGI parameter to the end of any URL to have the results be ready for cross-domain JavaScript consumption

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

我设置此请求的方式与此 View 中其他 jsonp 调用完全相同，但联邦公报调用返回错误意外 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
    }
}]);

Controller :

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 这可能会导致问题吗？

Answer 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)。