Я хочу объявить мои переменные в одном месте, чтобы не повторять код, реагировать приложение - PullRequest
Новая
       11

Я хочу объявить мои переменные в одном месте, чтобы не повторять код, реагировать приложение

0 голосов
/ 21 июня 2019

Мои вызовы api fetch используют одни и те же заголовки, вместо того, чтобы повторять переменные для каждой функции вызова api, могу ли я разместить эти переменные в одном месте, а затем вызвать эти переменные?Я попытался поместить их в функцию, а затем вызвать эту функцию, но реагирует, жалуется, что переменные отсутствуют.Я использую компонент класса и обращаюсь к повторяющимся переменным parsed и headersAPI , я хочу их в одном месте, в идеале.

   componentDidMount() {
    this.getUserProfile();
    this.searchBands();
  }

  getUserProfile() {
    let parsed = new URLSearchParams(window.location.search).get(
      "access_token"
    );
    parsed = { token: parsed };
    console.log(parsed.token);

    let headersAPI = {
      headers: { Authorization: "Bearer " + parsed.token }
    };

    fetch(`https://api.spotify.com/v1/me`, headersAPI)
      .then(response => response.json())
      .then(data =>
        this.setState({
          userName: data.display_name,
          log: console.log(data)
        })
      )
      .catch(error =>
        this.setState({
          log: console.error("Error:", error),
          errorApi: true
        })
      );
  }

  searchBands(name) {
    let parsed = new URLSearchParams(window.location.search).get(
      "access_token"
    );
    parsed = { token: parsed };
    console.log(parsed.token);

    let headersAPI = {
      headers: { Authorization: "Bearer " + parsed.token }
    };
    let searchName = this.state.searchName === "" ? "The Cure" : name;

    //search band
    fetch(
      `https://api.spotify.com/v1/search?q=${searchName}&type=artist`,
      headersAPI
    )
      .then(response => response.json())
      .then(data =>
        this.setState({
          artistName: data.artists.items[0],
          log: console.log(data),
          image: data.artists.items[0].images[0].url
        })
      )
      .catch(error =>
        this.setState({
          log: console.error("Error:", error),
          errorApi: true
        })
      );
  }

1 Ответ

1 голос
/ 21 июня 2019

Я просто поместил переменные вне объявления класса, затем вызвал их внутри функций вызова API, похоже, сработал. 

const parsed = new URLSearchParams(window.location.search).get("access_token");
const headersAPI = {
      headers: { Authorization: "Bearer " + parsed }
    };

    class App extends Component {..}
...