ReactJS-异步调用中的响应

Question

我正在学习axios和异步呼叫，如果这太基础了，请抱歉。我有这个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)内部的响应传递？

Answer 1

提供的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,
    ...
 });