Vue fetch est appelée deux fois

Question

J'ai cet extrait de code :

export default defineComponent({
  name: "filter",
  props: {},
  setup() {
    const states = useCounterStore();
    return { states };
  },
  data() {
    return {
      items: [],
    };
  },
  methods: {},
  mounted() {
  fetch("http://localhost:3000/tags")
  .then((res) => res.json())
  .then((data) => {
    this.items = data;
    alert(data);
  })
  .catch((err) => console.log(err.message));
  },
});

fetch est appelé deux fois et je ne sais pas pourquoi. y-a-t'il une solution?

Answer 1

D'après le code partagé, il semble que ce composant soit installé deux fois, vous souhaiterez donc peut-être examiner le composant qui l'installe.

Cependant, vous pouvez stocker la réponse afin qu'elle ne soit pas récupérée plusieurs fois

const tags = ref(null);
const tagsError = ref(null);
const getTags = () => {
  fetch("http://localhost:3000/tags")
    .then((res) => res.json())
    .then((data) => {
      tags.value = data;
      return tags;
    })
    .catch((err) => tagsError.value = err.message;
}

export default defineComponent({
  name: "filter",
  props: {},
  setup() {
    const states = useCounterStore();
    if(tags.value === null) {
      getTags().then(() => this.items = [...tags.value]);
    } else {
      this.items = [...tags.value];
    }
    return { states };
  },
  data() {
    return {
      items: [],
    };
  },
  methods: {},
});

Parce que chaque fois tags 是在组件外部声明的，所以它的行为类似于全局变量，因此它是有状态的。每次组件设置 il vérifie si la balise est chargée, puis soit utilise les données mises en cache, soit les charge et met à jour l'élément par la suite.

Quelques notes sur l'exemple...
Idéalement, une telle logique devrait se trouver dans un fichier séparé et avoir une meilleure abstraction. Par exemple, si vous disposez de plusieurs API, elles peuvent partager cette fonctionnalité, par exemple. const {状态、数据、错误} = useApiCall('/tags')。并且您可以直接使用 tags，而不是使用 items，因为示例中的标签已经是 ref. Il peut également y avoir des conditions de concurrence qui peuvent être résolues en suivant le statut des appels d'API.