React - 使用 axios 的 GET 和 POST 请求

Question

In my application I need to GET some data (for which I provide the native authtoken).

In the same event, however, I also need to POST a second token to be consumed by a few endpoints, for external backend api calls.

How do I POST this second token using my working code below using axios ?

Should I extend Authorization bearer or simply POST Spotify Token as string data? How so?

My code:

  getData(event) {
    const {token} = this.props.spotifyToken

    const options = {
      url: `${process.env.REACT_APP_WEB_SERVICE_URL}/endpoint`,
      method: 'get',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${window.localStorage.authToken}`
      }
    };

    return axios(options)
    .then((res) => {
      console.log(res.data.data)
   })    
    .catch((error) => { console.log(error); });
  };

Answer 1

For an async await applied to your code would look something like this.

async getData(event) {
  const {token} = this.props.spotifyToken

  let getRes = await axios.get(`${process.env.URL}/endpoint` {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${window.localStorage.authToken}`
    }
  }

  let postRes = await axios.post(`${process.env.URL}/endpoint` {
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${window.localStorage.authToken}`
    }
  }

  console.log(getRes.data.data);
  console.log(postRes.data.data);
};

Answer 2

In this specific case, where a token is needed to fetch data at backend, I found that passing token at url is more suitable, like so:

@endpoint.route('/endpoint/<select>/<user_id>/<token>', methods=['GET'])
def endpoint(name, user_id, token):
# business logic

and:

const options = {
  url: `${process.env.REACT_APP_WEB_SERVICE_URL}/endpoint/${select}/${userId}/${this.props.spotifyToken}`,
  method: 'get',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Bearer ${window.localStorage.authToken}`
  }
};

otherwise, backend code would run twice, for POST and GET, which is not desired in my case.