React - 使用 axios 的 GET 和 POST 請求

Question

在我的應用程序中，我需要GET一些數據（為此我提供了本機 authtoken）。

但是，在同一事件中，我還需要發布第二個令牌以供幾個端點使用，用於外部后端POST調用。

如何使用POST使用下面的工作代碼axios第二個令牌？

我應該擴展授權承載還是簡單地將POST令牌作為字符串數據發布？ 怎么會這樣？

我的代碼：

  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

對於應用到您的代碼的異步等待看起來像這樣。

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

在這種特定情況下，需要令牌在后端獲取數據，我發現在 url 傳遞令牌更合適，如下所示：

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

和：

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

否則，后端代碼將運行兩次，用於 POST 和 GET，這在我的情況下是不需要的。