Vue-异步 function 返回 Promise {<pending> }</pending>

Question

好的，这是一些我遇到困难的基本 Vue：

我正在尝试从在线提供的动漫 API 中获取一些数据（动漫）

我有Anime.vue（这是视图页面）和getAnime.js（包含函数）。 当我在 Anime.vue 文件中有 function 时，它可以工作，但我试图将它分开，现在我无法将动画发送到 vue 页面。 这是代码：

Anime.vue（仅包含脚本部分）

<script>
import getAnime from "../composables/getAnime";
export default {
  data() {
    return {};
  },

  setup() {
    let anime = getAnime();

    console.log(anime); //this returns Promise pending on console
  },
};
</script>

这个 getAnime.js 文件：

async function getAnime() {
  const axios = require("axios");
  let anime = ''

  try {
    const response = await axios.get("https://api.jikan.moe/v3/anime/" + 20)
    .then((res) => {          
        anime = res.data
        console.log(anime) //this returns the anime file as {request hash...
       })
 } catch (error) {
    console.log(error);
  }
  return anime
}
export default getAnime

Answer 1

尝试这个：

async function getAnime() {
  const axios = require("axios");

  try {
     const response = await axios.get("https://api.jikan.moe/v3/anime/" + 20);
     return response;
  } catch (error) {
     console.log(error);
  }
}
export default getAnime

Answer 2

async function 隐式返回 Promise，因此您需要await结果。

async function getAnime() {
  const axios = require("axios");

  try {
     const response = await axios.get("https://api.jikan.moe/v3/anime/" + 20);
     return response;
  } catch (error) {
     console.log(error);
     throw error;  
  }
}
export default getAnime;

在你的 vue 文件中：

try {
  const animeData = await getAnime();
} catch(e) {
 // handle errors
}