Bagaimana untuk melaksanakan data permintaan pengundian dalam vue

Dalam pembangunan web, data permintaan pengundian ialah kaedah teknikal yang sangat biasa, yang boleh menghantar permintaan secara berterusan ke perkhidmatan bahagian belakang untuk mendapatkan data atau maklumat status baharu. Dalam rangka kerja Vue, data permintaan pengundian boleh dilaksanakan melalui beberapa cara teknikal yang mudah. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan data permintaan pengundian.

1 Gunakan atribut jam tangan Vue

Atribut jam tangan dalam Vue digunakan untuk memantau perubahan dalam data tertentu dan melaksanakan operasi yang sepadan. Kita boleh menggunakan atribut jam tangan untuk melaksanakan fungsi data permintaan undian. Langkah pelaksanaan khusus adalah seperti berikut:

1 Isytiharkan nilai dalam komponen Vue untuk menyimpan data yang perlu ditinjau, contohnya:

data() {
  return {
    data: null // 需要轮询的数据
  }
}

2 perlu menggunakan kitaran hayat yang dipasang Buat pemerhati dalam fungsi untuk memantau perubahan dalam atribut data dan melaksanakan operasi yang sepadan. Dalam pemerhati, kami menggunakan fungsi setInterval untuk menghantar permintaan data dengan kerap. Contohnya:

mounted() {
  const pollData = setInterval(() => {
    axios.get('yourapi').then(response => {
      this.data = response.data // 将获取的数据赋值给data属性
    }).catch(error => console.log(error))
  }, 5000) // 设置定时器的时间间隔为5s
  // 组件销毁时清除定时器
  this.$once('hook:beforeDestroy', () => {
    clearInterval(pollData)
  })
}

Dalam kod di atas, kami menggunakan perpustakaan axios untuk menghantar permintaan data dan menetapkan data yang dikembalikan oleh axios kepada atribut data. Dengan menetapkan selang pemasa kepada 5 saat, anda boleh menghantar permintaan kepada perkhidmatan hujung belakang dengan kerap.

Selain itu, kita juga perlu mengosongkan pemasa apabila komponen dimusnahkan untuk mengelakkan kebocoran memori. Dalam Vue, anda boleh menggunakan fungsi $once untuk memantau kitaran hayat komponen:beforeDestroy untuk melaksanakan beberapa operasi pembersihan yang diperlukan sebelum komponen dimusnahkan, seperti mengosongkan pemasa.

Menggunakan atribut jam tangan Vue untuk melaksanakan tinjauan pendapat untuk data permintaan adalah sangat mudah, tetapi perlu diingat bahawa kaedah ini tidak boleh dipercayai dalam beberapa kes. Sebagai contoh, jika kelajuan rangkaian tidak baik atau perkhidmatan bahagian belakang bertindak balas dengan perlahan, ia boleh menyebabkan permintaan berturut-turut bertindih, mengakibatkan pertindihan data atau ralat status. Oleh itu, kita perlu menggunakan kaedah yang lebih ketat untuk menyelesaikan masalah ini.

2. Gunakan RxJS gaya Vue

RxJS ialah perpustakaan pengaturcaraan reaktif yang berkuasa yang menyediakan API yang berkuasa untuk mengendalikan acara tak segerak. Dalam Vue, kita boleh menggunakan RxJS gaya Vue untuk melaksanakan fungsi data permintaan undian. Langkah pelaksanaan khusus adalah seperti berikut:

1 Mula-mula, kita perlu memperkenalkan perpustakaan RxJS gaya Vue, contohnya:

import VueRx from 'vue-rx'
Vue.use(VueRx)

Di sini kita menggunakan fungsi penggunaan Vue untuk memperkenalkan RxJS. .

2. Seterusnya, gunakan fungsi selang RxJS dalam komponen untuk mencipta pemasa, contohnya:

mounted() {
  const pollData = this.$interval(5000) // 设置定时器的时间间隔为5s
  // 组件销毁时清除定时器
  this.$once('hook:beforeDestroy', () => {
    pollData.unsubscribe()
  })
}

Dalam kod di atas, kami menggunakan fungsi $interval Vue untuk mencipta pemasa. Fungsi $interval adalah serupa dengan fungsi selang RxJS Ia menghantar permintaan data secara berkala ke perkhidmatan hujung belakang dan mengembalikan objek Boleh Diperhatikan.

Boleh diperhatikan ialah konsep utama dalam RxJS, yang mewakili aliran peristiwa tak segerak yang boleh dilanggan. Dalam kod di atas, kami mencipta objek Observable dan menyahlanggannya apabila komponen itu dimusnahkan.

3 Seterusnya, kita perlu menggunakan fungsi combineLatest untuk menggabungkan objek Boleh Diperhatikan dan memetakannya menjadi objek baharu. Contohnya:

mounted() {
  const pollData = this.$interval(5000) // 设置定时器的时间间隔为5s
  // 组合Observable对象
  const getData = this.$http.get('yourapi') // 发送数据请求
  const combined = this.$observables.combineLatest(pollData, getData)
  
  combined.subscribe(([_, response]) => {
    this.data = response.data // 将获取的数据赋值给data属性
  }, error => console.log(error))
  // 组件销毁时清除定时器
  this.$once('hook:beforeDestroy', () => {
    pollData.unsubscribe()
  })
}

Dalam kod di atas, kami menggunakan objek $http Vue untuk menghantar permintaan data dan menggunakan fungsi combineLatest untuk menggabungkan dua objek Observable. Apabila melanggan objek Observable, kami menggunakan penstrukturan tatasusunan untuk mendapatkan nilai elemen kedua dalam tatasusunan yang dikembalikan (iaitu, data yang dikembalikan oleh permintaan) dan menetapkannya kepada atribut data.

Menggunakan RxJS gaya Vue untuk melaksanakan tinjauan pendapat untuk data permintaan adalah lebih rumit, tetapi ia boleh mengelakkan masalah bertindih antara permintaan dan respons. Pada masa yang sama, RxJS juga menyediakan API dan pengendali yang kaya yang boleh membantu kami mengendalikan acara tak segerak dengan lebih baik.

Ringkasan

Menggunakan Vue untuk melaksanakan data permintaan tinjauan pendapat adalah sangat mudah. ​​Kami boleh menggunakan atribut jam tangan Vue atau RxJS untuk melaksanakannya. Kedua-dua kaedah ini mempunyai kelebihan dan kekurangan masing-masing, dan ia perlu dipilih mengikut situasi sebenar. Pada masa yang sama, kita juga perlu memberi perhatian kepada beberapa masalah biasa, seperti kebocoran memori dan pertindihan antara permintaan dan tindak balas. Dengan mengendalikan isu ini dengan teliti, kami boleh melaksanakan tinjauan pendapat yang cekap dan boleh dipercayai untuk data yang diminta.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan data permintaan pengundian dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!