JavaScript verwendet Promise zur Verarbeitung mehrerer wiederholter Anfragen

1. Warum diesen Artikel schreiben?

Sie haben sicherlich viele Artikel zum Umgang mit doppelten Anfragen gelesen. Die meisten davon sind in zwei Versionen unterteilt: Zurückgeben doppelter Anfragen, bevor die Antwort zurückgegeben wird, und Verwenden von Drosselung/Anti-Shake, um häufige Benutzervorgänge indirekt zu vermeiden. Bei der jüngsten Verwendung habe ich festgestellt, dass diese beiden Versionen in manchen Szenarien immer noch einige Einschränkungen aufweisen.

2. Problemszenario

Wie im Bild zu sehen, soll die Visitenkartenkomponente oben und unten auf meiner h5-Seite angezeigt werden. Die Informationen dieser Visitenkarten werden über eine Schnittstelle abgerufen. Wenn diese Komponente auf der aktuellen Seite initialisiert wird, treten zwei wiederholte Anforderungen auf.

An diesem Punkt stehen Sie vor mehreren Entscheidungen:

1. Bearbeiten Sie keine doppelten Anfragen.

• Nachteil 1: Verursacht unnötige Ressourcenverschwendung und erhöht den Serverdruck
• Nachteil 2: Die Anzahl gleichzeitiger HTTP-Anfragen im Browser ist begrenzt. Wenn es viele Anfragen für den ersten Bildschirm der Seite gibt und kein hierarchisches Laden stattfindet, kann es leicht zu einer Anforderungsblockierung kommen, was die Fähigkeit des Benutzers beeinträchtigt, den Hauptinhalt überhaupt zu sehen.

2. Doppelte Anfragen direkt zurückgeben. Dies wird auch in einigen Artikeln praktiziert, allerdings weist dieser Ansatz eine Einschränkung auf: Er bestimmt direkt, dass nachfolgende wiederholte Anfragen ungültige Anfragen sind.

• Ungültiges Anforderungsszenario: Der Benutzer klickt auf eine Schaltfläche, um abzufragen oder zu speichern. Bevor das Anforderungsergebnis zurückgegeben wird, werden nachfolgende Klicks grundsätzlich als ungültige Anforderungen betrachtet und sollten blockiert werden. Natürlich kann dieses Problem umgangen werden, indem man der Taste eine Drosselung/Anti-Shake hinzufügt
• Warum es im aktuellen Szenario nicht anwendbar ist: Beide Visitenkartenkomponenten benötigen Daten zum Rendern. Wenn die zweite wiederholte Anforderung zurückgegeben wird, enthält die Visitenkarte einer der Komponenten keine Daten.

3. Extrahieren Sie die Anforderung aus der Komponente, fügen Sie sie in die übergeordnete Unternehmensseite ein und übergeben Sie sie dann als Requisiten an die Komponente.

• Vorteil: Zwei Komponenten können mit nur einer Anfrage eine Kopie der Daten gemeinsam nutzen.
• Einschränkungen: Gilt nur für eine einzelne Unternehmensseite. Tatsächlich wird diese Komponente von vielen Geschäftsseiten verwendet. Selbst wenn die angeforderte Funktion in eine öffentliche API extrahiert wird, muss sie beim Initialisieren jeder Geschäftsseite einmal aufgerufen und dann als Requisiten an die Komponente übergeben werden.

3. Lösung

Kernidee

• Initialisieren Sie ein Array von HandleList
• Stellen Sie vor dem Senden einer Anfrage anhand der gleichen Eingabeparameter fest, ob es sich um eine doppelte Anfrage handelt.
  • Nicht wiederholte Anfragen: Fügen Sie die Anfrageparameter und das von der Anfrage zurückgegebene Promise zum Array hinzu.
  • Wiederholungsanfrage: Verwenden Sie find, um das entsprechende Versprechen direkt zurückzugeben
• Entfernen Sie nach Abschluss der Anforderung die zuvor in handleList hinzugefügten Anforderungsinformationen.

Diese Lösung kann für alles verwendet werden, unabhängig davon, ob Axios, JQ, Fetch oder Applet-Anfragen verwendet werden. Hier ist das Implementierungsprinzip. Wenn Sie es verwenden, fügen Sie einfach den entsprechenden Code zur entsprechenden Anforderungszeit ein.

Codebeispiel

let handleList = [] // Anfrageliste/**
 * Anfrage simulieren * @author waldon
 * @Datum 2020/6/9
 */
const httpRequest = () => {
  returniere neues Promise((auflösen) => {
    setzeTimeout(() => {
      resolve(`Anfrage erfolgreich, Zeitstempel: ${new Date().getTime()}`)
    }, 1000)
  })
}
/**
 * Anfragebezogene Verarbeitung * @author waldon
 * @Datum 2020/6/9
 * @param {String} URL -
 * @param {Object} requestObj – Anforderungsparameter * @returns {Promise} – Anforderungsversprechen
 */
Funktion AnfrageTest(URL, AnfrageObj = {}) {
  // Da die Eingabeparameter im Allgemeinen keine komplexen Typen beinhalten, reicht JSON.stringify für den Serialisierungsvergleich aus. // Eine Einschränkung besteht darin, dass sich die Reihenfolge der Eingabeparameter ändert, was sich auf die Beurteilung auswirkt. Diese spezielle Änderung tritt jedoch im Allgemeinen bei wiederholten Anforderungen nicht auf. // Wenn eine solche Anforderung besteht, wechseln Sie zu anderen APIs für rekursive Vergleiche. Lodash hat auch ähnliche APIs.
  const sameHandle = handleList.find(
    (Artikel) => Artikel.URL === URL && JSON.stringify(Artikel.Anforderungsobjekt) === JSON.stringify(Anforderungsobjekt)
  )
  wenn (gleicherHandle) {
    // Wenn dieselbe Anfrage auftritt, wird das Versprechen der vorherigen Anfrage direkt zurückgegeben
    console.log(`Es liegt eine doppelte Anfrage vor, kehren Sie direkt zurück`)
    returniere sameHandle.handle
  }
  const handle = neues Versprechen((lösen, ablehnen) => {
    httpRequest()
      .then((res) => {
        Entschlossenheit (res)
      })
      .catch((err) => {
        ablehnen (Fehler)
      })
      .finally(() => {
        // Unabhängig vom Anfrageergebnis muss die entsprechende Anfrage entfernt werden handleList = handleList.filter(
              (Artikel) =>
                item.url !== url und JSON.stringify(item.requestObj) !== JSON.stringify(requestObj)
            )
      })
  })
  handleList.push({ url, requestObj, handle })
  Rückholgriff
}

// *******************************Ich fange an, die wunderschöne Trennlinie zu verwenden *********************************
Konstante Parameter = {
  Name: 'Waldon'
}
requestTest('/ajax/sameUrl', params).then((res) => {
  console.log(`Ergebnis der ersten Anfrage`, res)
  console.log(`handleList:`, handleList)
})
requestTest('/ajax/sameUrl', params).then((res) => {
  console.log(`Anfrageergebnis wiederholen`, res)
  console.log(`handleList:`, handleList) // Es gibt immer nur eine Anfrage in der Anfrageliste setTimeout(() => {
    console.log(`handleList nach Abschluss der Anfrage:`, handleList) // Nachdem die Anfrage abgeschlossen ist, wird die der handleList entsprechende Anfrage gelöscht}, 100)
})
setzeTimeout(() => {
  // Verzögern Sie die Anfrage um 500 ms, da wir die Schnittstelle so eingestellt haben, dass sie nach 1 s zurückkehrt. Daher sollten wir dasselbe Ergebnis erhalten requestTest('/ajax/sameUrl', params).then((res) => {
    console.log(`Anfrageergebnis wiederholen`, res)
    console.log(`handleList:`, handleList)
  })
}, 500)

Ausgabe

Wenn eine doppelte Anfrage vorliegt, kehren Sie direkt zurück. Wenn eine doppelte Anfrage vorliegt, kehren Sie direkt zurück. Das Ergebnis der ersten Anfrage ist erfolgreich und der Zeitstempel lautet: 1621650375540
handleList: [
{
URL: '/ajax/gleicheURL',
AnfrageObj: { Name: 'waldon' },
handle: Promise { 'Anfrage erfolgreich, Zeitstempel: 1621650375540' }
}
]
Wiederholen Sie die Anfrage und die Anfrage ist erfolgreich. Der Zeitstempel lautet: 1621650375540
handleList: [
{
URL: '/ajax/gleicheURL',
AnfrageObj: { Name: 'waldon' },
handle: Promise { 'Anfrage erfolgreich, Zeitstempel: 1621650375540' }
}
]
Wiederholen Sie die Anfrage und die Anfrage ist erfolgreich. Der Zeitstempel lautet: 1621650375540
handleList: [
{
URL: '/ajax/gleicheURL',
AnfrageObj: { Name: 'waldon' },
handle: Promise { 'Anfrage erfolgreich, Zeitstempel: 1621650375540' }
}
]
handleList nach Abschluss der Anfrage: []

Code-Adresse Codepen

https://codepen.io/waldonUB/pen/ZEeeONM

Zu beachtende Punkte

• Fügen Sie der Antwort keine Daten hinzu und löschen Sie sie nicht. Da die Objektreferenzadresse im von wiederholten Anforderungen zurückgegebenen Promise dieselbe ist, führt jede Änderung zu einer Datenverschmutzung. In besonderen Fällen können Sie das Antwortergebnis oberflächlich kopieren und dann verarbeiten oder entsprechende Behauptungen hinzufügen.
• Bei der Verarbeitung wiederholter Anforderungen empfiehlt es sich, im Protokoll darauf hinzuweisen und die Gründe und Verwendungsszenarien in der Komponente zu kommentieren, um zu verhindern, dass andere Fehler machen.
• Seien Sie darauf vorbereitet, in Extremfällen Anforderungsfehler zu behandeln, legen Sie die effektive Zeit zum Löschen und Entfernen von Anforderungsinformationen fest und vermeiden Sie Speicherlecks, die durch die Ansammlung übermäßiger, nutzloser Anforderungsinformationen bei Schließungen verursacht werden.

Dies ist das Ende dieses Artikels über die Verwendung von Promise in JavaScript zur Verarbeitung mehrerer wiederholter Anfragen. Weitere Informationen zu JS Promise-Anfragen mit mehreren wiederholten Anfragen 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!