在angular.js中解析JSONP $ http.jsonp（）响应

小编典典

在angular.js中解析JSONP $ http.jsonp（）响应

javascript

我正在使用angular的$http.jsonp()请求，该请求成功返回包装在函数中的json：

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback";

$http.jsonp(url).
    success(function(data, status, headers, config) {
        //what do I do here?
    }).
    error(function(data, status, headers, config) {
        $scope.error = true;
    });

如何访问/解析返回的函数包装的JSON？

阅读 452

2020-04-25

共1个答案

小编典典

更新：从Angular 1.6开始

您不能再使用JSON_CALLBACK字符串作为占位符来指定回调参数值应放在何处

您现在必须像这样定义回调：

$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})

通过更改/访问/声明参数$http.defaults.jsonpCallbackParam，默认为callback

注意：您还必须确保将URL添加到受信任/白名单中：

$sceDelegateProvider.resourceUrlWhitelist

或通过以下方式明确信任：

$sce.trustAsResourceUrl(url)

success/error
被弃用了。

在$http传统方法的承诺success，并error已被弃用，并将在V1.6.0被删除。请改用标准然后方法。如果$httpProvider.useLegacyPromiseExtensions设置为，false则这些方法将抛出$http/legacy error。

使用：

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
var trustedUrl = $sce.trustAsResourceUrl(url);

$http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
    .then(function(data){
        console.log(data.found);
    });

上一个答案：Angular 1.5.x及更高版本

您要做的就是更改callback=jsonp_callback为callback=JSON_CALLBACK这样：

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

然后.success，如果返回成功，则函数应该像您拥有的那样触发。

这样，您就不必浪费全球空间。这是AngularJS文档中记录在这里。

更新了Matt Ball的小提琴以使用此方法：http :
//jsfiddle.net/subhaze/a4Rc2/114/

完整示例：

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";

$http.jsonp(url)
    .success(function(data){
        console.log(data.found);
    });

2020-04-25