在 Javascript 中使用 promise 不起作用

Question

我正在编写一个与 Spotify 的 API 连接的应用程序。这是我正在尝试做的基本流程。

1. 用户输入艺术家，我得到艺术家的 spotify id。
2. 我使用该 ID 查找相关艺术家。
3. 我存储每个相关艺术家的热门曲目。
4. 我为特定用户创建了包含这些歌曲的播放列表。

现在，这显然需要以特定的顺序发生（我认为该术语是同步的）。我今天才刚刚了解 Promises，我不太清楚如何使用它们。我相信这是一种将功能链接在一起以确保它们以特定顺序发生的方式。但是，我不知道该怎么做。

这是我尝试做的尝试：

angular.module('smart-spot', [])
    .controller('MainCtrl', [
        '$scope', '$http',
        function($scope, $http)
        {
            $scope.createPlaylist = function()
            {
                var artist = $scope.artist;
                console.log(artist);
                window.open("/login", "Playlist Creation", 'WIDTH=400, HEIGHT=500');
                var artistId;
                getArtistId(artist)
                    .then(function(response) //this is where the below error is referring to
                    {
                        artistId = response.data;
                        getRelatedArtists(artistId)
                            .then(function(response)
                            {
                                //this chaining doesn't appear to be working.
                            }, function(error)
                            {
                                return $q.reject(error);
                            })
                    }, function(error)
                    {
                        return $q.reject(error);
                    });
            };
            var getArtistId = function(artist)
            {
                $http.get('/search', { params:{ artist:artist } })
                    .then(function(response)
                    {
                        console.log(response);
                        return response;
                    }, function(error)
                    {
                        return $q.reject(error);
                    });
            };

            var getRelatedArtists = function(artist)
            {
                //get the related artists
            }
        }
    ]);

我在上面标记的行中显示TypeError: Cannot read property 'then' of undefined 的控制台错误。因此，尝试将这些函数链接在一起并不像我想要的那样工作。

我错过了什么？

Answer 1

你的getArtistId 没有返回一个promise 对象，因为它使用ajax，你可以返回$http.get() 调用返回的相同的promise

$scope.createPlaylist = function() {
  var artist = $scope.artist;
  console.log(artist);
  window.open("/login", "Playlist Creation", 'WIDTH=400, HEIGHT=500');
  var artistId;
  getArtistId(artist)
    .then(function(response) //this is where the below error is referring to
      {
        artistId = response.data;
        //same way getRelatedArtists has to return a promise
        getRelatedArtists(artistId)
          .then(function(response) {
          }, function(error) {
            //handle the error if you want to
          })
      },
      function(error) {
        //no need to return anything here, if you want to display an error message to the user you can do that here
      });
};
var getArtistId = function(artist) {
  return $http.get('/search', {
    params: {
      artist: artist
    }
  });
};