ReactJS - ответ в асин c вызов - PullRequest
Новая
       2

ReactJS - ответ в асин c вызов

0 голосов
/ 30 апреля 2020

Я учу топор ios и вызовы asyn c, пожалуйста, извините, если это слишком основательно c. У меня есть axios вызов:

trackComponent.jsx 

getTrack(event) {
    const {select, userId} = this.props
    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/track/${select}/${userId}/${this.props.spotifyToken}`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };
    return axios(options)
    .then((res) => {
      this.setState({
        playlist: res.data.data[0].playlist,
        artists: res.data.data[0].artists,
        previews: res.data.data[0].previews,
        youtube_urls: res.data.data[0].youtube_urls,
      })
    })    
    .catch((error) => { console.log(error); });
  };

Теперь я выполняю рефакторинг своего кода и внедрил apiService перед из всех моих вызовов компонентов для обработки авторизации, например:

trackComponent.jsx 

import {apiService} from '../ApiService'

async track(event) {
    if (this.props.isAuthenticated) {
      const {userId, spotifyToken} = this.props;
      const {artist} = this.state
      const tracks = await apiService.getTrack(userId, spotifyToken, artist) ;
      this.setState({tracks});
    } else {
      this.setState({tracks: []});
    }
  }

в ApiService. js У меня есть: 

async getTrack(userId, spotifyToken, select) {
    return this.axios.get(
      `${process.env.REACT_APP_WEB_SERVICE_URL}/track/${artist}/${userId}/${spotifyToken}`
    );
  }

Теперь, как мне настроить этот новый async track(event) в компоненте, чтобы сохранить мой «ответ» и установить следующие состояния, 

playlist: res.data.data[0].playlist, 
artists: res.data.data[0].artists, 
previews: res.data.data[0].previews, 
youtube_urls: res.data.data[0].youtube_urls,

, которые передавались в качестве ответа внутри then() первого getTrack(event)?

1 Ответ

1 голос
/ 30 апреля 2020

Если вызов API выполнен успешно, tracks (значение, которое вы возвращаете из getTrack) будет содержать ответы, которые вы ищете.

Если вы console.log это, вы ' Увидим различные поля. На данный момент, это просто вопрос доступа к значениям и установки состояния с ними: 

const tracks = await apiService.getTrack(userId, spotifyToken, artist);
const firstEntry = tracks.data.data[0];

this.setState({
    playlist: firstEntry.playlist, 
    artists: firstEntry.artists,
    ...
});
...