javascript - jQuery 自动完成嵌套 Ajax 调用

Question

我目前正在致力于使用 Spotify 元数据 API 实现专辑搜索自动完成功能。我已经完成了大部分功能，但是在进行嵌套调用来检索专辑封面时遇到了麻烦。我相信这是我的问题的根源。当我执行 ajax 调用来检索图像时，它确实有效，并且我得到了正确的数据，但 return 语句没有被执行。我想做的是获取前四个结果，每个结果获取一个图像并返回标签、项目和图像。

 $('#spotify-album-search').autocomplete({
      source:
        function (query, process) {
          $.when(
            $.ajax({
                url: 'http://ws.spotify.com/search/1/album.json?q=' + query.term,
            })
          ).then(function (data) {
            process($.map(data.albums.slice(0, 4), function(item) {
              $.when (
                $.ajax({
                    url: 'https://embed.spotify.com/oembed/?url=' + item.href,
                    dataType: 'jsonp'
                })
              ).then(function (image) {
                // Input: The Rolling Stones
                console.log(item.artists[0].name + ' - ' + item.name + ': ' + image.thumbnail_url);
                // Console: The Rolling Stones - Let It Bleed: https://d3rt1990lpmkn.cloudfront.net/cover/91205a1c80960d7055f8ed1bbe022f195e1767a4
                return { label: item.artists[0].name + ' - ' + item.name, album: item, image: image.thumbnail_url };
              });
            }));
          });
      },
      select: function (e, ui) {
        console.log("selected= " + ui.item.album);
      },
      messages: {
        noResults: '',
        results: function() {}
      }
    })
    .data('ui-autocomplete')._renderItem = function(ul, item) {
      return $('<li></li>')
          .data( "ui-autocomplete-item", item)
          .append('<a>' + item.label + '<img src="' + item.image + '" alt="" />' + '</a>')
          .appendTo(ul);
    };

编辑:

如果您认为有帮助，您可以在这里找到一个可用的 fiddle ! http://jsfiddle.net/9GbkL/

Answer 1

在异步编程中，return 仅用于强制退出。您实际上无法返回数据......

在异步编程中使用数据的唯一方法是将其发送到函数。

因此，您需要一个可以根据数据更新 UI 的函数...

在当前已完成 console.log 数据测试的位置添加此功能。