Spotify API，无法正确链接两个 API 调用

Posted 2023-04-15

【中文标题】Spotify API，无法正确链接两个 API 调用

【英文标题】：Spotify API, can't chain two API calls properly

【发布时间】：2018-12-29 20:53:39

【问题描述】：

我无法链接这两个 API 调用。所以基本上我正在尝试重新创建 Spotify 界面，并且单独地，这些调用实际上工作得很好！

我还有一个“onPlayClick”函数，它与“onNextClick”函数基本相同，如下所示，但端点不同，并且是 PUT 方法而不是 POST 方法。正确播放和设置 selectedSong 的状态。

但是，调用 updateCurrentlyPlaying 的 onNextClick 无法按预期工作。预期的功能是，当用户单击下一步时，歌曲将转到下一首曲目（有效！），然后更新 UI 上的曲目信息。

但最终发生的是它首先更新轨道信息然后切换轨道，所以在 UI 上它在某种意义上总是“落后一个轨道”，我不知道为什么第二个 API 领先于第一个一！ :S 非常感谢任何帮助！

onNextClick = () => 
  const  deviceId, token  = this.state
  fetch(`https://api.spotify.com/v1/me/player/next?device_id=$deviceId`, 
    method: 'POST',
    headers:  'Authorization': 'Bearer ' + token ,
  )
  .then(response => response.json())
  .then(this.updateCurrentlyPlaying())  
 



updateCurrentlyPlaying()
    const  deviceId, token  = this.state;

    let selectedSong;
    fetch(`https://api.spotify.com/v1/me/player/currently-playing?device_id=$deviceId`, 
      method: 'GET',
      headers:  'Authorization': 'Bearer ' + token ,
    )
    .then(response => response.json())
    .then(data => 
      selectedSong = 
        name: data.item.name,
        duration: Math.round(data.item.duration_ms / 1000),
        artists: data.item.artists,
        album: data.item.album.name,
        image: data.item.album.images[0],
        id: data.item.id,
        uri: data.item.uri,
        offset: data.offset
      
      this.setState( selectedSong )
    )
  

【问题讨论】：

为什么第一个then是异步的？

抱歉，已编辑。这个问题真是漫长的一天。

我的抓取方式有问题吗？

【参考方案1】：

更新答案

如下所述，下面的原始答案可能仍然相关。然而，第一个问题是调用this.updateCurrentlyPlaying 的方式。在编写.then(this.updateCurrentlyPlaying()) 时，您会立即调用this.updateCurrentlyPlaying，它将undefined 传递回Promise 链。

相反，你想要的是：

onNextClick = () => 
  const  deviceId, token  = this.state
  fetch(`https://api.spotify.com/v1/me/player/next?device_id=$deviceId`, 
    method: 'POST',
    headers:  'Authorization': 'Bearer ' + token ,
  )
  .then(() => this.updateCurrentlyPlaying()) 
 

原答案

我的猜测是您的代码没有问题，但 Spotify 的行为与您期望的不同。当您 POST 到 me/player/next 时，端点会立即响应代码 204，表明它已收到您的请求。

确实，Spotify API docs 是这么说的：

完成的请求将返回 204 NO CONTENT 响应代码，然后向播放器发出命令。

这意味着您的代码看到 204 并立即继续为当前曲目调用 Spotify API。这发生在之前上面提到的传递的command to the player 已被 Spotify 的播放器调用。

我对 Spotify API 不是很熟悉，而且我看到这是 Beta 版 - 也许他们会在不久的将来提供更优雅的解决方案。在此之前，您最好的选择可能是重试第二次调用（有超时限制）几次，直到您确认轨道确实发生了变化。

这里有一个简单的例子，你可以如何实现它：

  updateCurrentlyPlaying(priorSongId) 
    const deviceId, token = this.state;

    let selectedSong;
    let numTries = 0;
    const retryFetchUntilUpdate = () => 
      fetch(`https://api.spotify.com/v1/me/player/currently-playing?device_id=$deviceId`, 
        method: 'GET',
        headers: 'Authorization': 'Bearer ' + token,
      )
        .then(response => response.json())
        .then(data => 
          if (data.item.id === priorSongId && numTries < 5) 
            numTries += 1;
            setTimeout(retryFetchUntilUpdate, 250)
           else 
            selectedSong = 
              name: data.item.name,
              duration: Math.round(data.item.duration_ms / 1000),
              artists: data.item.artists,
              album: data.item.album.name,
              image: data.item.album.images[0],
              id: data.item.id,
              uri: data.item.uri,
              offset: data.offset
            
            this.setState(selectedSong)
          
        )
    
    retryFetchUntilUpdate();
  

【讨论】：

我不确定我是否遵循。 POST to me/player/next 立即发生实际上正是我想要的，但它没有发生。实际上是 updateCurrentlyPlaying 中的 GET 首先执行，我不知道为什么

你怎么知道 GET 是先执行的？我怀疑它正在第二次执行，但歌曲尚未在 Spotify 结束时更新。

从头开始，再看看：你试过从.then(this.updateCurrentlyPlaying())中删除()吗？照原样，它将调用updateCurrentlyPlaying 并将其result（在本例中为undefined）传递给promise 链。

其实我有！但是在那之后最终发生的事情是轨道信息根本没有得到更新，因为它永远不会进入 updateCurrentlyPlaying！我在它的开头放置了一个控制台日志，以查看它是否已到达，但它没有。我尝试将 updateCurrentlyPlaying 绑定并更改为一个粗箭头函数，但这也不起作用

这很奇怪。并且没有错误？试试：.then(() => this.updateCurrentlyPlaying())。 --编辑：刚刚看到你的编辑。删除.then(response => response.json()) 并替换为.then(() => this.updateCurrentlyPlaying()) 怎么样？