在 Vue 中安装时，Axios 数据不会被转移到数据中

Question

我正在尝试通过 Vue 2 中的 axios 调用从 Twitch IGDB API 调用数据（我们使用 POST 而不是 GET），但它不起作用就像我期望的那样。我可以记录 access_token，但不能记录来自获取请求的数据。

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

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

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

Answer 1

你快到了。 getGames()需要returnaxios()这样调用方才能收到响应数据的值：

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

那么调用者可以await它：

async mounted() {
  this.games = await getGames(this.accessToken)
}

在 Vue 中安装时，Axios 数据不会被转移到数据中

Axios data not being carried over to data when mounted in Vue

api

twitch

vue.js

vuejs2

twitch-api