如何调用 API，以便它返回您请求的任何内容以及如何减少 Vuejs 中的观察者数量

Question

正如你所看到的，在我的代码中，我正在调用一个返回链接的api，但我还需要从该api中获得其他东西，那么我该如何修改该函数，以便从该api或它的剧集列表中获得类似动画的标题此外，如果我真的得到了标题或剧集列表，我不需要开始看更多的东西吗？有办法绕过这个吗？

<template>
<section class="container">
<div class="column">
<img :src="url1" alt="./assets/notFound.png" />
</div>
<div class="column">
<img :src="url2" alt="./assets/notFound.png" />
</div>
</section>
</template>
<script>
import axios from "axios";
import Buefy from "buefy";
import "buefy/dist/buefy.css";
import Vue from "vue";
Vue.use(Buefy);
export default {
props: {
anime1: String,
anime2: String,
},
data() {
return {
url1: "",
url2: "",
error: "",
};
},
methods: {
animeFind(anime, data) {
axios
.get(`https://api.jikan.moe/v3/search/anime?q=${anime}`)
.then((response) => {
const id = response.data["results"][0]["mal_id"];
axios
.get(`https://api.jikan.moe/v3/anime/${id}`)
.then((response) => (this[data] = response.data["image_url"]));
})
.catch((error) => {
this.error = error; // take care of this later
});
},
},
watch: {
anime1: {
immediate: true,
// eslint-disable-next-line no-unused-vars
handler(newVal, oldVal) {
this.animeFind(newVal, "url1");
},
},
anime2: {
immediate: true,
// eslint-disable-next-line no-unused-vars
handler(newVal, oldVal) {
this.animeFind(newVal, "url2");
},
},
},
};
</script>

Answer 1

首先：要了解您正在使用的api的结果，你可以

axios
.get(`https://api.jikan.moe/v3/search/anime?q=${anime}`)
.then((response) => {
const id = response.data["results"][0]["mal_id"];
axios
.get(`https://api.jikan.moe/v3/anime/${id}`)
.then((response) => {
console.log(response)
});
})

在console.log((之后，您的响应尝试在浏览器控制台中查看结果之后，你可以使用获得所有你想要的数据

this.key = response.data.[key]

不要忘记在数据对象中添加您要查找的密钥

data() {
return {
url1: "",
url2: "",
key1: "",
key2: "",
error: "",
};},