Angular JSONP Factory調用不起作用，但是在控制器中確實起作用

Question

我查看了與該問題相關的所有SO帖子，但仍然找不到答案。 這個回答看來是最有前途的，但我不明白答案，看來提出要求的人也沒有。

我想做什么？ 向itunes API發出JSONP角度GET請求。 當我從控制器發出GET請求時，這種方法非常有效，但是當我嘗試重構時，為了遵循“關注分離”的原則，將請求移至工廠，並注入控制器，我遇到了麻煩。 我知道如果我在工廠中不使用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();
    }

}]);

就我所知，該錯誤不是很多幫助，但無論如何還是值得發布TypeError: h.replace is not a function

Answer 1

您的$http.jsonp方法輸入錯誤是您的第一個問題， $http.jsonp方法接受兩個參數，例如

$ http.jsonp（url，[config]）url->要進行ajax配置的url->如果要在請求中進行其他更改，則可以從此處在{}鍵值對中傳遞這些設置可以設置headers ， type等。

您的服務方法應該返回promise，因為您只需要返回已經具有promise的$http.jsonp對象，而無需在此處創建額外的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)
});