json - d3 - 无法从 json 请求返回数据？

Question

我正在尝试使用 d3.json()在给定艺术家 ID(例如 5K4W6rqBFWDnAN6FQUkS6x )的情况下返回数据的函数内部，但我不知道如何有效地返回数据。该功能看起来像

// Get artist's related artist's information
function relatedArtists(id){
  var jsonPromise = new Promise(function(resolve, reject) {
    // Async JSON request
    d3.json('https://api.spotify.com/v1/artists/' + id + '/related-artists', function(error, data){
      if(error) reject(error);
      resolve(data.artists);
    });
  });

  jsonPromise.then(function(success) {
    console.log(success);
    //return(success)  //doesn't work
  });

  jsonPromise.catch(function(error){
    console.error(error);
  });

}

我试过在函数中创建一个变量然后修改它

function relatedArtists(id){
  var testVar = 'hello';
  var jsonPromise = new Promise(...{
    // Async JSON request
    d3.json(...)
  });
  jsonPromise.then(function(success) {
    testVar = success;
  });
  return(testVar);
}

但是 testVar遗体 'hello' ，尽管我尽了最大的努力。我已经阅读了一些关于范围和 promise 的阅读 Material ，但是如果我不理解其中任何一个的核心机制，我很乐意做更多的事情。谢谢阅读!

Answer 1

由于请求的异步性质，响应将永远不会在您的调用代码中可用。你可以使用 Promises(正如 Alexander T. 和你所假设的那样，在很多情况下都是不错的选择!)但是 d3.queue 也做得很好。在我的代码段中，您可以看到如何使用多个请求的结果运行代码。

function buildRelatedArtistUri(id) {
  return 'https://api.spotify.com/v1/artists/' + id + '/related-artists';
}

d3.queue()
  .defer(d3.json, buildRelatedArtistUri('5K4W6rqBFWDnAN6FQUkS6x'))
  .await(function(error, data) {
    // data and data.artists are available in this function‘s scope only
    console.log(data.artists);
  });

d3.queue()
  .defer(d3.json, buildRelatedArtistUri('5K4W6rqBFWDnAN6FQUkS6x'))
  .defer(d3.json, buildRelatedArtistUri('3nFkdlSjzX9mRTtwJOzDYB'))
  .await(function(error, data1, data2) {
    // this function will be called once both functions have finished
    console.log(data1.artists, data2.artists);
  });

<script src="https://d3js.org/d3.v4.min.js"></script>