Spotify API:无法获取用户当前播放的曲目,GET https://api.spotify.com/v1/me/player/currently-playing 400

问题描述 投票:0回答:0

我正在尝试学习如何使用 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)

我不确定出了什么问题,我们将不胜感激!

javascript reactjs api asynchronous spotify
© www.soinside.com 2019 - 2024. All rights reserved.