Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解

実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同期リクエストであり、リクエストの開始から応答の受信までが完全なプロセスです。このプロセスに必要な時間は予測できません。極端な言い方をすると、リクエストに必要な時間がポーリング間隔を超えると、多くの問題が発生します。したがって、ポーリング間隔は、リクエスト プロセスが完了することを保証することを基準にする必要があります。これがより論理的です。

事業内容:

1. ページは最初のページのデータを表示するために初期化され、その後現在のページのデータは10秒ごとに更新されます。
2. フィルター条件を変更するか、ページ番号を変更してデータを直接更新し、現在のデータを10秒ごとに更新します。

ビジネスロジックポイント分析:

1. 手動で呼び出された場合、リクエストは直ちに実行されます
2. その後、10秒ごとに実行してリストを更新します

実装のアイデア

1. リクエストを直接呼び出す
2. リクエストの成功コールバック関数にタイマーsetTimeoutを設定します。
3. タイマー内で 1.2 ステップを繰り返します。
4. 手順1.2.3を再帰関数にカプセル化する

// ポーリングメソッド polling (page) {
      this.getWorks(page).then(res => {
        this.pollingST = setTimeout(() => {
          タイムアウトをクリアします(this.pollingST)
          this.polling(ページ)
        }, 10000)
      })
    }

setIntervalを使わない理由

setInterval の機能は、ポーリングの概念に完全に一致しているようです。操作が同期コードである場合、setInterval を使用しても問題はありません。問題は、setInterval が十分に柔軟ではなく、最後のリクエストが完了したかどうかを知ることができないことです。したがって、setTimeout の方が適しています。

注意事項

ポーリングでは、pollingST 変数を使用してタイマーを記録しました。実行のたびに、前のタイマーをクリアする必要があります。再帰呼び出しはタイマー内にあるため、タイマーをクリアしてポーリングを終了するのは非常に便利です。

完全な疑似コード

<スクリプト>
エクスポートデフォルト{
  データ （） {
    戻る {
      ポーリングST: null
    }
  },
  メソッド: {
    // ページ変更イベント pageChange (params) {
      // 既存のタイマーをクリアします clearTimeout(this.pollingST)
      //ポーリングを呼び出す this.polling(params)
    },
    // リクエストインターフェースメソッド getWorks() {
      新しい Promise を返します(resolve => resolve({}))
    },
    // ポーリングメソッド polling (params) {
      this.getWorks(params).then(res => {
        this.pollingST = setTimeout(() => {
          タイムアウトをクリアします(this.pollingST)
          this.polling(パラメータ)
        }, 10000)
      })
    }
  },
  作成された（）{
    // ポーリングを呼び出す this.polling({ page: 1, pageSize: 5 })
  },
  破壊された（）{
    タイムアウトをクリアします(this.pollingST)
  }
}
</スクリプト>

要約する

これで、vue ポーリング ソリューションに関するこの記事は終了です。より関連性の高い vue ポーリング ソリューションについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。