挂载在 Vue 中时，Axios 数据不会转移到数据中

问题描述

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

我制作了一个单独的文件，其中包含我在 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 中。我应该用不同的方式称呼它吗？导入它会导致问题吗？我应该在组件内部创建一个方法吗？

解决方法

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

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

然后调用者可以await它：

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