我正在尝试学习如何使用 Spotify API 进行实验并希望能够制作一个完整的项目。我能够从用户登录中获取访问令牌。但是,我不确定应该如何发出获取请求来获取用户当前播放的曲目数据。这是我到目前为止的代码:
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {Container, Button } from 'react-bootstrap';
import {useEffect, useState} from 'react';
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
const CLIENT_SECRET = process.env.REACT_APP_CLIENT_SECRET;
const REDIRECT_URI = 'http://localhost:3000'
const AUTH_ENDPOINT = 'https://accounts.spotify.com/authorize'
const RESPONSE_TYPE = 'token'
const scopes = ['user-read-currently-playing'];
function App() {
const [token, setToken] = useState('')
const [currentTrack, setCurrentTrack] = useState(null)
useEffect(() => {
const hash = window.location.hash
let token = window.localStorage.getItem("token")
if (!token && hash) {
token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]
window.location.hash = ""
window.localStorage.setItem("token", token)
}
setToken(token)
currentlyPlaying()
}, [token])
const logout = () => {
setToken('')
window.localStorage.removeItem('token')
}
async function currentlyPlaying(){
var params = {
method: 'GET',
headers: {
'Authorization': 'Bearer ' + token
}
}
var currentPlay = await fetch('https://api.spotify.com/v1/me/player/currently-playing', params)
.then(response => response.json())
.then(data => {setCurrentTrack(data)})
}
return (
<div className="App">
<Container className='d-flex align-items-center justify-content-center' style={{minHeight:'100vh'}}>
{!token ?
<Button
href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}&scope=${scopes}`}
className='btn btn-success'>Login</Button>
: <Button
onClick={logout}
className='btn btn-danger'>Logout</Button>}
</Container>
</div>
);
}
export default App;
每当我在登录后重定向回来时,我都会在控制台中收到这些错误
App.js:54 GET https://api.spotify.com/v1/me/player/currently-playing 400
currentlyPlaying @ App.js:54
performWorkUntilDeadline @ scheduler.development.js:533
VM766:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at App.js:54:1
at async currentlyPlaying (App.js:54:1)
我不确定出了什么问题,我们将不胜感激!