Angular JSONP 工厂调用不工作，但它在控制器中工作

Question

我查看了与此问题相关的所有 post，但仍然找不到答案。 This 回复似乎是最有希望的，但我不明白答案，而且提问的人似乎也不明白。

我想做什么？向 iTunes API 发出 JSONP angular GET 请求。当我从我的控制器发出 GET 请求时，这完美地工作，但是当我试图重构时，为了遵守 'Separation of Concerns' 的原则，通过将这个请求移动到工厂，并注入控制器我我运行陷入困境。我知道调用仍在进行，因为如果我在我的工厂中不使用 JSONP 调用，我会收到 CORS 错误。

这里是工厂代码：

var myApp = angular.module('jDillaApp', []).factory('Music', function ($http) {

var o = {
    songs: []
};

o.getNextSongs = function () {
    return $http.jsonp({
        method: 'GET',
        url: 'https://itunes.apple.com/search?term=j+dilla&limit=25?format=jsonp&callback=JSON_CALLBACK'
    }).success(function (data) {
        console.log(data)
    });
}

return o
})

我的控制器看起来像这样：

myApp.controller('jDillaCtrl', ['$scope', '$http', 'Music',

function ($scope, $http, Music) {

    Music.getNextSongs();
    $scope.songs = Music.songs;
    var media = new Audio();

    $scope.playSong = function () {
        media.pause();
        var randomSong = Math.round(Math.random() * ($scope.songs.length - 1));
        media = new Audio($scope.songs[randomSong]);
        media.play();
    }

}]);

据我所知，这个错误并没有多大帮助，但无论如何都值得 posting TypeError: h.replace is not a function

Answer 1

您的 $http.jsonp 方法输入错误，这是您的第一个问题，$http.jsonp 方法接受两个参数

$http.jsonp(url, [config]) url -> the url which you want make an ajax config -> if you want to make additional changes in request then you can pass those setting from here in {} key value pair like you can set headers, type, etc.

你的服务方法应该returnpromise，因为你只需要return$http.jsonp已经有promise的对象，不需要在这里创建额外的promise对象。

服务

o.getNextSongs = function () {
    return $http.jsonp('https://itunes.apple.com/search?term=j+dilla&limit=25?format=jsonp&callback=JSON_CALLBACK')
}

在控制器中，呼叫将使用 .success 和 .error 解决，您也可以使用 .then

控制器

Music.getNextSongs()
.success(function (data) {
     //here you get the ajax success
     console.log(data)
});

Angular JSONP 工厂调用不工作，但它在控制器中工作

Angular JSONP Factory call not working, however it does work in controller

javascript

angularjs

angularjs-service