Vollständiges Beispiel einer Vue-Polling-Request-Lösung

Verständnis von Umfragen

Tatsächlich liegt der Schwerpunkt beim Polling auf dem Intervall zwischen den Ausführungen und nicht auf der Schleife selbst. Ajax ist eine asynchrone Anfrage. Vom Einleiten der Anfrage bis zum Empfangen der Antwort ist dies ein vollständiger Prozess. Die für diesen Prozess benötigte Zeit ist unvorhersehbar. Um es auf den Punkt zu bringen: Wenn die für die Anfrage benötigte Zeit unser Abfrageintervall überschreitet, treten viele Probleme auf. Daher sollte das Abfrageintervall darauf basieren, sicherzustellen, dass der Anfrageprozess abgeschlossen ist, was logischer ist.

Geschäftsbeschreibung:

1. Die Seite wird initialisiert, um die erste Seite mit Daten anzuzeigen. Anschließend werden die aktuellen Seitendaten alle zehn Sekunden aktualisiert.
2. Ändern Sie die Filterbedingungen oder ändern Sie die Seitenzahl, um die Daten direkt zu aktualisieren, und aktualisieren Sie dann alle zehn Sekunden die aktuellen Daten

Analyse der Geschäftslogikpunkte:

1. Bei manuellem Aufruf wird die Anfrage sofort ausgeführt
2. Führen Sie es dann alle zehn Sekunden aus, um die Liste zu aktualisieren

Umsetzungsideen

1. Rufen Sie die Anfrage direkt an
2. Setzen Sie den Timer setTimeout in der erfolgreichen Callback-Funktion der Anfrage
3. Wiederholen Sie 1,2 Schritte innerhalb des Timers.
4. Kapseln Sie die Schritte 1.2.3 in eine rekursive Funktion

// Polling-Methode polling (Seite) {
      this.getWorks(Seite).then(res => {
        dies.pollingST = setTimeout(() => {
          Zeitüberschreitung löschen(diese.pollingST)
          this.polling(Seite)
        }, 10000)
      })
    }

Warum nicht setInterval verwenden?

Die Funktion von setInterval scheint perfekt zum Konzept des Pollings zu passen. Wenn unser Vorgang synchroner Code ist, ist die Verwendung von setInterval kein Problem. Das Problem besteht darin, dass setInterval nicht flexibel genug ist und wir nicht wissen können, ob die letzte Anfrage abgeschlossen wurde. Daher wäre setTimeout besser.

Dinge zu beachten

Beim Polling habe ich den Timer mit der Variable pollingST aufgezeichnet. Der vorherige Timer muss vor jeder Ausführung gelöscht werden. Da der rekursive Aufruf innerhalb des Timers erfolgt, ist es sehr praktisch, das Polling durch Löschen des Timers zu beenden.

Vollständiger Pseudocode

<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      pollingST: null
    }
  },
  Methoden: {
    // Seitenänderungsereignis pageChange (params) {
      // Lösche den vorhandenen Timer clearTimeout(this.pollingST)
      //Polling aufrufen this.polling(params)
    },
    // Anforderungsschnittstellenmethode getWorks() {
      gib ein neues Versprechen zurück(auflösen => auflösen({}))
    },
    // Polling-Methode polling (Parameter) {
      dies.getWorks(params).then(res => {
        dies.pollingST = setTimeout(() => {
          Zeitüberschreitung löschen(diese.pollingST)
          this.polling(Parameter)
        }, 10000)
      })
    }
  },
  erstellt () {
    // Polling aufrufen this.polling({ page: 1, pageSize: 5 })
  },
  zerstört () {
    Zeitüberschreitung löschen(diese.pollingST)
  }
}
</Skript>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Vue-Polling-Lösung. Weitere relevante Vue-Polling-Lösungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!