Richtiges Arbeiten mit Ajax-Anfragen in WordPress

Wenn Sie mit APIs von Drittanbietern arbeiten und dies asynchron tun, besteht immer die Möglichkeit, dass das, was Sie anfordern, ein unerwünschtes Ergebnis zurückgibt.

Vielleicht ist es ein Fehlercode, vielleicht ist es eine Warnung, oder vielleicht ist es eine einfache Nachricht, die so etwas wie "Wir bearbeiten Ihre Anfrage noch auf unserer Seite" sagt.

In jedem Fall können Sie sie normalerweise auf der Serverseite gut handhaben und die Clientseite wissen lassen, wie sie damit umgehen soll. Aber wenn Sie es mit dem letzteren Fall zu tun haben, werden Sie dort durch die Verarbeitung durch Dritte blockiert; Es gibt andere Dinge, die Sie tun können, um mit dieser Situation besser umzugehen.

Im letzteren Fall ist es beispielsweise besser, etwas zu warten und dann die Anfrage erneut zu stellen, um zu sehen, ob die API eine andere Antwort für Sie hat.

Aber wenn Sie dies tun, ist Ajax erforderlich, das offensichtlich JavaScript erfordert. Eine der offensichtlichen, aber veralteten Methoden dafür ist die Verwendung von setInterval.

Das Problem dabei ist jedoch, dass es einen Stapel von Anforderungen erstellt und dann, wenn die Antwort fertig ist, jedes Element im Stapel dieselbe Antwort erhält.

Dies kann sich drastisch auf einen bestimmten Server auswirken. Und es gibt bessere Möglichkeiten, dies zu tun.

Richtiges Arbeiten mit Ajax-Anfragen

Wie üblich, da WordPress mit jQuery ausgeliefert wird, werde ich das verwenden; Ich möchte Sie jedoch auch dringend bitten – falls Sie dies noch nicht getan haben – sich Ajax in ES6 anzusehen, um eine Vorstellung davon zu bekommen, wie dies nativ zu tun ist.

Wie auch immer, die Idee ist folgende: Anstatt ein Intervall einzurichten, verwenden Sie die integrierten Ajax-Funktionen, um die Antwort richtig auszuwerten. Und nur unter bestimmten Bedingungen die Funktion erneut auslösen.

Ein typisches Beispiel: Die $.post -Methode von jQuery bietet einige Funktionen, die genau dafür verwendet werden können. Zum Beispiel bietet es Methoden wie:

• erledigt()
• scheitern()
• stets()

Und jedes davon soll unter bestimmten Bedingungen ausgeführt werden, die ich gleich in einigen Codebeispielen zeigen werde.

Bevor Sie dies tun, ist es jedoch wichtig zu verstehen, dass ich einige Parameter sende, von denen ich annehme, dass Sie damit vertraut sind:

• die WordPress-Ajax-URL (die ich als acme.ajax_url definiere),
• eine URL zu dem angezeigten Beitrag (die in einer sUrl-Variablen gespeichert wird),
• und eine Sicherheitsnonce, die ich acme.security nennen werde

Wenn einer der obigen Punkte nicht klar ist, lesen Sie bitte die verlinkten Seiten, um zu sehen, wie dies erreicht wird.

Aber nachdem das gesagt wurde, hier ist die Idee dahinter, wie Sie wiederholte Ajax-Antworten ohne setInterval verwalten können.

1 Eine Funktion für die Arbeit

Das erste, was Sie tun müssen, ist, die Arbeit, die Sie erledigen werden, in eine eigene Funktion zu verpacken. Dies bedeutet, dass Sie es von überall in der clientseitigen Anwendung oder sogar im Kontext eines Timers (falls unbedingt erforderlich) aufrufen können.

Zum Beispiel :

var _processArticle = function() {

  var request =
    $.post(acme.ajax_url, {
      action:  'acme_get_data',
      url:      sUrl
      security: acme.security
    }, function(response) {
      // ...
    })
    .done(function(response) {
      // ...
    })
    .fail(function(xhr, status, error) {
      // ...
    })
    .always(function() {
      // ..
    });
}

Und wie Sie sehen können, habe ich einige der oben erwähnten Funktionen ausgeblendet.

2 Behandeln Sie den Erfolg

Im Erfolgsfall können Sie eine anonyme Funktion als Callback für die $.post- Funktion verwenden. Das Hauptargument, mit dem Sie sich beschäftigen sollten, ist das Antwortargument.

Normalerweise möchte ich, dass meine Antworten ein Erfolgsattribut und ein Fehlerattribut haben. Dies macht es einfacher, einen Fall zu bearbeiten, wenn die Antwort vollständig erfolgreich war, aber die Daten, die vom Server zurückkamen, nicht das waren, was ich erwartet hatte.

var _processArticle = function() {

  var request =
    $.post(acme.ajax_url, {
      action:  'acme_get_data',
      url:      sUrl
      security: acme.security
    }, function(response) {

      // Abort all request operations.
      if (false === response.success) {
        request.abort();
      }

      // Handle the successful response by modifying the DOM.
    })
    .done(function(response) {
      // ...
    })
    .fail(function(xhr, status, error) {
      // ...
    })
    .always(function() {
      // ...
    });
}

Dies bedeutet nicht unbedingt, dass ein Fehler aufgetreten ist. Es bedeutet nur, dass das, was ich suchen wollte, nicht gefunden wurde.

3 Behandeln Sie den Fehler

Auf der anderen Seite gibt es Zeiten, in denen etwas schief gehen kann. Warum dies passiert, kann eine Reihe von Gründen haben, und um es richtig zu verstehen, lohnt es sich, die Argumente des Callbacks zu untersuchen, nämlich den Status und den Fehler.

var _processArticle = function() {

  var request =
    $.post(acme.ajax_url, {
      action:  'acme_get_data',
      url:      sUrl
      security: acme.security
    }, function(response) {

      // Abort all request operations.
      if (false === response.success) {
        request.abort();
      }

      // Handle the successful response by modifying the DOM like flashing the first image.
      $('img:first').fadeTo('fast', 0.5, function() {
        $(this).fadeTo('fast', 1);
      });
    })
    .done(function(response) {
      // ...
    })
    .fail(function(xhr, status, error) {

      console.log('There was a problem with contacting the API.');

      console.log('The status was:');
      console.log(status);

      console.log('The error was:')
      cosole.log(error);
    })
    .always(function() {
      // ...
    });
}

Ich kann hier keine konkreten Beispiele geben, weil jede API anders ist; Ich empfehle jedoch, zumindest Daten in die Konsole zu schreiben, damit Sie verstehen, was vor sich geht und wie Sie es auf Codeebene elegant handhaben können.

4 Behandeln Sie den unbedingten Fall

In diesem speziellen Fall wird diese Funktion ausgelöst, unabhängig davon, ob etwas erfolgreich war oder nicht.

var _processArticle = function() {

  var request =
    $.post(acme.ajax_url, {
      action:  'acme_get_data',
      url:      sUrl
      security: acme.security
    }, function(response) {

      // Abort all request operations.
      if (false === response.success) {
        request.abort();
      }

      // Handle the successful response by modifying the DOM like flashing the first image.
      $('img:first').fadeTo('fast', 0.5, function() {
        $(this).fadeTo('fast', 1);
      });
    })
    .done(function(response) {
      // ...
    })
    .fail(function(xhr, status, error) {

      console.log('There was a problem with contacting the API.');

      console.log('The status was:');
      console.log(status);

      console.log('The error was:')
      console.log(error);
    })
    .always(function() {
      // Regardless of what happens, this is where you can provide the user feedback.
    });
}

Diese Funktion ist nicht etwas, das Sie vielleicht immer brauchen (kein Wortspiel beabsichtigt), aber es ist eine solide Option, um beispielsweise einen Fortschrittsbalken auszublenden oder etwas auf der Benutzeroberfläche anzuzeigen. Dies kann dem Benutzer ein wenig Rückmeldung geben, dass die Anfrage ihre Arbeit abgeschlossen hat (wiederum unabhängig von Fehlschlag oder Erfolg).

5 Bewältigen Sie den Erfolg noch einmal

Schließlich ist die Done- Methode der Success-Methode sehr ähnlich, aber stellen Sie sich vor, dass sie ein zweites Mal aufgerufen werden soll.

Das bedeutet, dass, nachdem die Antwort mit dem Antwortargument vom Server zurückgekommen ist, dasselbe erneut ausgelöst wird, sobald alles andere abgeschlossen ist.

var _processArticle = function() {

  var request =
    $.post(acme.ajax_url, {
      action:  'acme_get_data',
      url:      sUrl
      security: acme.security
    }, function(response) {

      // Abort all request operations.
      if (false === response.success) {
        request.abort();
      }

      // Handle the successful response by modifying the DOM.
    })
    .done(function(response) {
      // Display any additional changes you may want to make based on the respnse.
    })
    .fail(function(xhr, status, error) {

      console.log('There was a problem with contacting the API.');

      console.log('The status was:');
      console.log(status);

      console.log('The error was:')
      console.log(error);
    })
    .always(function() {
      // Regardless of what happens, this is where you can provide the user feedback.
    });
}

Dies gibt Ihnen eine weitere Chance, noch einmal alles zu tun, was Sie mit dem Antwortargument tun möchten, bevor alles abgeschlossen ist.

Ich verwende dies selten, aber es gab Zeiten, in denen ich ein Element erst entfernen wollte, nachdem etwas erledigt war, alle anderen Verarbeitungen abgeschlossen waren und die Antwort erfolgreich war.

Vielleicht brauchen Sie nicht alles

Offensichtlich ist ein Großteil des obigen Codes nur für eine Demo zur Behandlung von Anforderungen gedacht. Der Zweck besteht jedoch darin, zu zeigen, wie diese Anforderung behandelt wird, ohne dass Intervalle zum Stapeln von Anforderungen festgelegt werden müssen. Stattdessen nutzen Sie bereits vorhandene Funktionen, um beispielsweise die Funktion erneut aufzurufen, wenn ein Fehler auftritt.

Wie auch immer, dies mag für einige übertrieben sein, aber für andere, die es gewohnt sind, setInterval zu verwenden, kann es eine viel bessere Möglichkeit sein, Ajax-Anforderungen zu verwalten, die sich nicht stapeln und dieselbe Anforderung an den Server senden, wenn bereits eine Antwort erfolgt ist gelang es.

Und das ist letztendlich das Ziel: Effizienter Code, der die Informationen abruft, die wir benötigen, ohne die Drittanbieter-API oder den Browser unseres eigenen Benutzers zu beeinträchtigen.