vueでポーリングリクエストデータを実装する方法

Web 開発では、リクエスト データのポーリングは非常に一般的な技術的方法であり、新しいデータやステータス情報を取得するためにバックエンド サービスにリクエストを継続的に送信できます。 Vue フレームワークでは、単純な技術的手段を通じてポーリング リクエスト データを実装できます。この記事では、Vue フレームワークを使用してポーリング リクエスト データを実装する方法を紹介します。

1. Vue の watch 属性を使用する

Vue の watch 属性は、特定のデータの変更を監視し、対応する操作を実行するために使用されます。 watch 属性を使用して、リクエスト データをポーリングする機能を実装できます。具体的な実装手順は次のとおりです:

1. ポーリングする必要があるデータを保存する値を Vue コンポーネントで宣言します (例:

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

2)。次に、次のことを行う必要があります。実装されたライフサイクル関数に値を追加します。 データ属性の変更を監視し、対応する操作を実行するウォッチャーを作成します。ウォッチャーでは、setInterval 関数を使用してデータ リクエストを定期的に送信します。例:

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)
  })
}

上記のコードでは、axios ライブラリを使用してデータ リクエストを送信し、axios から返されたデータを data 属性に割り当てます。タイマー間隔を 5 秒に設定すると、バックエンド サービスに定期的にリクエストを送信できます。

さらに、メモリ リークを避けるために、コンポーネントが破棄されたときにタイマーをクリアする必要もあります。 Vue では、$once 関数を使用してコンポーネントのフック:beforeDestroy ライフサイクルを監視し、コンポーネントが破棄される前にタイマーのクリアなど、必要なクリーンアップ操作を実行できます。

Vue の watch 属性を使用してリクエスト データのポーリングを実装するのは非常に簡単ですが、この方法は場合によっては信頼できないことに注意してください。たとえば、ネットワーク速度が遅い場合、またはバックエンド サービスの応答が遅い場合、連続したリクエストが重複してデータの重複やステータス エラーが発生する可能性があります。したがって、この問題を解決するには、より厳密な方法を使用する必要があります。

2. Vue スタイルの RxJS を使用する

RxJS は、非同期イベントを処理するための強力な API を提供する強力なリアクティブ プログラミング ライブラリです。 Vue では、Vue スタイルの RxJS を使用して、リクエスト データをポーリングする機能を実装できます。具体的な実装手順は次のとおりです:

1. まず、Vue スタイルの RxJS ライブラリを導入する必要があります (例:

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

ここでは、Vue の use 関数を使用して RxJS を導入します。

2. 次に、コンポーネントで RxJS の interval 関数を使用してタイマーを作成します (例:

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

上記のコードでは、Vue の $interval 関数を使用して Aタイマー。 $interval 関数は RxJS の間隔関数に似ており、データ要求をバックエンド サービスに定期的に送信し、Observable オブジェクトを返します。

Observable は RxJS の重要な概念であり、サブスクライブできる非同期イベント ストリームを表します。上記のコードでは、Observable オブジェクトを作成し、コンポーネントが破棄されたときにサブスクライブを解除します。

3. 次に、combinelate 関数を使用して、Observable オブジェクトを結合し、新しいオブジェクトにマップします。例:

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()
  })
}

上記のコードでは、Vue の $http オブジェクトを使用してデータ リクエストを送信し、combinelate 関数を使用して 2 つの Observable オブジェクトを結合します。 Observable オブジェクトをサブスクライブする場合、配列の構造化を使用して、返された配列 (つまり、リクエストによって返されたデータ) の 2 番目の要素の値を取得し、それをデータ属性に割り当てます。

Vue スタイルの RxJS を使用してポーリング リクエスト データを実装する方法はより複雑ですが、リクエストとレスポンスの間の重複の問題を回避できます。同時に、RxJS は、非同期イベントをより適切に処理するのに役立つ豊富な API と演算子も提供します。

概要

Vue を使用してポーリング リクエスト データを実装する方法は非常に簡単で、Vue の watch 属性または RxJS を使用して実装できます。どちらの方法にもそれぞれ長所と短所があり、実際の状況に応じて選択する必要があります。同時に、メモリ リークやリクエストとレスポンスの重複など、いくつかの一般的な問題にも注意する必要があります。これらの問題を慎重に処理することで、要求されたデータに対する効率的で信頼性の高いポーリングを実装できます。

以上がvueでポーリングリクエストデータを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。