Spotify API,无法正确链接两个 API 调用
Posted
技术标签:
【中文标题】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())
怎么样?以上是关于Spotify API,无法正确链接两个 API 调用的主要内容,如果未能解决你的问题,请参考以下文章
Spotify api 1.0.0 获取给定曲目集的播放列表的图像
在 Spotify 的搜索 API 中按艺术家搜索的正确 python 语法?
如何正确跟踪播放位置? [Android 媒体广播通知 Spotify API]