Vue fetch dipanggil dua kali

Question

Saya ada coretan kod ini:

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 dipanggil dua kali dan saya tidak tahu mengapa. Adakah terdapat sebarang penyelesaian?

Answer 1

Daripada kod kongsi, nampaknya komponen ini sedang dipasang dua kali, jadi anda mungkin mahu melihat komponen yang memasangnya.

Walau bagaimanapun, anda boleh menyimpan respons supaya ia tidak diambil beberapa kali

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: {},
});

Oleh kerana setiap kali tags 是在组件外部声明的，所以它的行为类似于全局变量，因此它是有状态的。每次组件设置 ia menyemak untuk melihat sama ada teg dimuatkan, kemudian sama ada menggunakan data cache atau memuatkannya dan mengemas kini item itu selepas itu.

Beberapa nota pada contoh...
Sebaik-baiknya, logik sedemikian harus berada dalam fail yang berasingan dan mempunyai abstraksi yang lebih baik. Contohnya, jika anda mempunyai berbilang API, mereka boleh berkongsi fungsi ini, mis. const {状态、数据、错误} = useApiCall('/tags')。并且您可以直接使用 tags，而不是使用 items，因为示例中的标签已经是 ref. Mungkin terdapat juga keadaan perlumbaan yang boleh diselesaikan dengan menjejak status panggilan API.