在 ReactJS、Spotify API 中進行 Axios 調用后從 Express 服務器讀取數據

Question

我的目標是從端點https://api.spotify.com/v1/me/top/tracks檢索數據。 我已經設置了一個快速服務器來處理路由，這里是端點。

app.get('/api/top/tracks', (req, res) => {

  axios({
    method: 'GET',
    url: 'https://api.spotify.com/v1/me/top/tracks',
    data: queryString.stringify({
      limit: 30,
      offset: 0,
      time_range: 'medium_term'
    }),
    headers: {
      'Authorization': 'Basic ' + encodedPayload,
      'Content-type': 'application/json',
    }
  }).then(response => {
    console.log(response.data)
    res.json(response.data)
 }).catch(error => console.log(error.response))
})

在另一個 React 功能組件中，我試圖讀取 useEffect 中的值，就像這樣。

  const [topTracks, setTopTracks] = useState(tracks)

  useEffect(() => {
    async function getTopTracks() {
      const response = await fetch('/api/top/tracks');
      const json = await response.json();
      setTopTracks(json);
    }

    getTopTracks();

  }, []);

老實說，我想我只是不理解來自 API 調用的響應 Promise object 並且不確定如何處理我試圖檢索的數據。

編輯：附加.catch 到 axios 調用的末尾。 但是現在我收到了一個很長的錯誤響應 HTTP 錯誤 400 錯誤請求。

Answer 1

如果您指向本地快遞服務器，那么您的反應組件的 fetch 調用需要指向完整的 url。 現在，您的組件的useEffect無法解析到正確的端點，即快速服務器

const response = await fetch('http://localhost:3000/api/top/tracks');

請注意，根據您的 express 服務器所在的位置，您可能需要替換 url 的 localhost 部分