1

我正在尝试使用 Vue 2 中的 axios 调用从 Twitch IGDB API（我们使用 POST 而不是 GET）调用数据，但它并没有像我期望的那样工作。我可以记录access_tokenfetch 请求中的数据，但不能记录数据。

我用我在 Vue 组件中导入的 API 请求创建了一个单独的文件，如下所示：

import axios from "axios";

// Variables for Twitch Authorization
const client_id = process.env.VUE_APP_CLIENT_ID;
const client_secret = process.env.VUE_APP_CLIENT_SECRET;
const grant_type = "client_credentials";
const cors_server = "process.env.VUE_APP_CORS_ANYWHERE_SERVER";

// Get access token from Twitch Dev Account
export async function getAccessToken() {
  try {
    const response = await axios.post(
      `https://id.twitch.tv/oauth2/token?client_id=${client_id}&client_secret=${client_secret}&grant_type=${grant_type}`
    );
    const data = await response.data.access_token;

    return data;
  } catch (error) {
    console.log("Error: ", error);
  }
};

// Call Games from API
export function getGames(accessToken) {
  axios({
    url: `${cors_server}https://api.igdb.com/v4/games`,
    method: 'POST',
    headers: {
        'Accept': 'application/JSON',
        'Client-ID': client_id,
        'Authorization': `Bearer ${accessToken}`,
    },
    data: "fields *;",
  })
  .then(res => {
    console.log(res.data);
    return res.data;
  })
  .catch(error => {
    console.error(error);
  });
};

我已将其导入到组件中，如下所示：

import { getAccessToken, getGames } from "./api_requests";

我已经定义了这样的数据：

data() {
    return {
      games: null,
      accessToken: '',
    }
  },

我mounted像这样调用数据。

  // Calling data from IGDB
  async mounted() {
    this.accessToken = await getAccessToken();
    getGames(this.accessToken).then(res => {
      this.games = res;
      console.log(this.games);
    });

我尝试了不同的调用方式getGames，mounted但我无法data正确保存它。我应该用不同的方式称呼它吗？导入它会导致问题吗？我应该在组件内部创建一个方法吗？

4

1 回答 1

2

您快到了。getGames()需要返回axios()以便调用者可以接收到响应数据的值：

export function getGames(accessToken) {
  return axios({/*...*/})
}

然后调用者可以await这样做：

async mounted() {
  this.games = await getGames(this.accessToken)
}
于 2021-04-30T21:47:40.847 回答