spotify-web-api-js, как запросить информацию о обратном вызове - PullRequest
Новая
       23

spotify-web-api-js, как запросить информацию о обратном вызове

0 голосов
/ 11 апреля 2019

Я пытаюсь получить случайную песню на основе запроса, отправленного по щелчку, чтобы сделать это, я должен запросить конечную точку один раз, чтобы получить общее количество дорожек этого запроса, и по обратному вызову использовать эти данные для получить случайное число и использовать его в качестве смещения для нового запроса в той же конечной точке, иногда оно действительно работает, но, как вы можете видеть, оно также часто терпит неудачу, я заметил withCredentials: false из XMLHttpRequest, но на самом деле не знаю почему это происходит только на самом обратном вызове. enter image description here

Как вы можете видеть на картинке, на самом деле это происходит успешно после многократного нажатия или иногда с первой попытки, но не при следующих.

код: 

import React, { useState } from "react";
import SpotifyWebApi from "spotify-web-api-js";

import token from "./token";

const spotifyApi = new SpotifyWebApi();
spotifyApi.setAccessToken(token);

const theSong = async myData => {
  const { myTotal, myCategory } = myData;
  try {
    const song = await spotifyApi.searchTracks(myCategory, {
      limit: 1,
      offset: myTotal
    });
    console.log(song);
  } catch (error) {
    console.log(error);
  }
};

const searchRandomTrack = async currentCategories => {
  try {
    await spotifyApi
      .searchTracks(currentCategories, { limit: 1 })
      .then(data => {
        const { total } = data.tracks;
        const min = Math.ceil(0);
        const max = Math.floor(total);
        const result = Math.floor(Math.random() * (max - min + 1)) + min;
        const myData = { myTotal: result, myCategory: currentCategories };
        return myData;
      })
      .then(data => theSong(data));
  } catch (error) {
    console.log(error);
  }
};

const getCategories = async setCategories => {
  try {
    const categoriesResult = await spotifyApi.getCategories({ limit: 50 });
    setCategories(categoriesResult.categories);
  } catch (error) {
    console.log(error);
  }
};

const App = () => {
  const [categories, setCategories] = useState(false);
  return (
    <>
      {!categories ? (
        <>
          <button type="button" onClick={() => getCategories(setCategories)}>
            Search Categories!
          </button>
        </>
      ) : (
        <div>
          {categories.items.map(currentCategories => (
            <button onClick={() => searchRandomTrack(currentCategories.id)}>
              {currentCategories.name}
            </button>
          ))}
        </div>
      )}
    </>
  );
};

export default App;

Код Песочница

Недостатком CodeSanbox является то, что для работы API нужен токен, токен, который действительно истекает, если у вас уже есть способ его создать, я оставил файл js готовым для записи токена там. Если у вас нет токена, я получаю свой из этого примера Пример авторизации Github .

...