Hey everyone, I could use some assistance with my Vue code. Here's the issue:
I'm attempting to retrieve data (specifically anime) from an online anime API.
In my project, I have two files: Anime.vue (the view page) and getAnime.js (which houses the function). Initially, when the function was within Anime.vue, everything worked fine. However, after separating it into a different file, I'm now facing difficulties sending the anime data to the Vue page.
Below is the code snippet from 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>
And here's the content of 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