ReactJS - response in async call

Question

I'm learning axios and async calls, please sorry if this is too basic. I have this axios call:

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); });
  };

Now, I'm refactoring my code, and I've implemented an apiService in front of all my component calls in order to deal with authorization, like so:

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: []});
    }
  }

an in ApiService.js I have:

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

Now how do I tweak this new async track(event) in the component in order to keep my 'response' and set the following states,

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,

which were being passed as response inside then() of the first getTrack(event)?

Pedro Mutter · Accepted Answer · 2020-04-30 19:35:33Z

1

Provided the API call executes successfully, tracks (the value you're returning from getTrack) will contain the responses you're looking for.

If you console.log it, you'll see the various fields. At that point, it's just a matter of accessing the values and setting state with them:

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

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

edited Apr 30, 2020 at 19:35

Pedro Mutter

1,2341 gold badge15 silver badges19 bronze badges

answered Apr 30, 2020 at 19:27

AJB97

113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Milton Over a year ago

@8-Bit Borges You might also want to not return the raw Axios response from your service, rather you might want to return tracks.data.data[0] or some other formatted object. This allows you to replace Axios or change your API service internally since you don't leak that information out, the API just returns the data needed.

8-Bit Borges Over a year ago

so I just set const res = await apiService.getTrack(userId, spotifyToken, artist);, right?

AJB97 Over a year ago

Yep! That's exactly it

8-Bit Borges Over a year ago

@Milton oh, that is nice. care to share some code providing that solution?

Collectives™ on Stack Overflow

ReactJS - response in async call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related