Asianmukainen työskentely Ajax-pyyntöjen kanssa WordPressissä

Aina kun työskentelet kolmannen osapuolen sovellusliittymien kanssa ja teet sen asynkronisesti, on aina mahdollisuus, että mitä tahansa pyydätkin, se palauttaa ei-toivotun tuloksen.

Ehkä se on virhekoodi, ehkä se on varoitus tai ehkä se on yksinkertainen viesti, jossa lukee jotain "Käsittelemme edelleen pyyntöäsi".

Kussakin tapauksessa voit yleensä käsitellä niitä palvelinpuolella hienosti ja antaa asiakaspuolelle tietää, kuinka käsitellä sitä. Mutta jos käsittelet jälkimmäistä tapausta, kolmannen osapuolen käsittely estää sinua. voit tehdä muita asioita käsitelläksesi tämän tilanteen paremmin.

Esimerkiksi jälkimmäisessä tapauksessa on parempi odottaa hetki ja tehdä sitten pyyntö uudelleen nähdäksesi, onko API:lla erilainen vastaus sinulle.

Mutta kun teet tämän, se vaatii Ajaxia, joka tietysti vaatii JavaScriptin. Yksi ilmeisistä, mutta vanhentuneemmista tavoista tehdä tämä on käyttää setIntervalia.

Ongelma tässä kuitenkin on, että se luo pinon pyyntöjä ja sitten kun vastaus on valmis, jokainen pinon kohde saa saman vastauksen.

Tämä voi vaikuttaa voimakkaasti mihin tahansa palvelimeen. Ja on olemassa parempia tapoja tehdä tämä.

Asianmukainen työskentely Ajax-pyyntöjen kanssa

Kuten tavallista, koska WordPress toimitetaan jQueryn kanssa, käytän sitä; Kehotan kuitenkin sinua myös – jos et ole vielä tehnyt – katsomaan Ajaxia ES6 :ssa saadaksesi käsityksen siitä, miten tämä tehdään alkuperäisesti.

Joka tapauksessa idea on seuraava: Sen sijaan, että määrität jonkin intervallin, käytä sitten sisäänrakennettuja Ajax-toimintoja arvioidaksesi vaste oikein. Ja vain tietyissä olosuhteissa, käynnistä toiminto uudelleen.

Esimerkki: jQueryn $.post – menetelmä tarjoaa joitain toimintoja, joita voidaan käyttää juuri tähän. Se tarjoaa esimerkiksi menetelmiä, kuten:

• tehty()
• epäonnistua()
• aina()

Ja jokainen näistä on tarkoitettu käytettäväksi tietyissä olosuhteissa, joista näytän hetkellisesti joissakin koodinäytteissä.

Ennen kuin teet sen, on kuitenkin tärkeää ymmärtää, että lähetän useita parametreja, jotka oletan sinun tuntevan:

• WordPress Ajax -URL-osoite (jonka määritän nimellä acme.ajax_url),
• URL-osoite katselemaan viestiin (joka tallennetaan sUrl-muuttujaan),
• ja tietoturvan, jota kutsun acme.securityksi

Jos jokin yllä olevista ei ole selvä, lue linkitetyt sivut nähdäksesi, kuinka tämä saavutetaan.

Mutta tässä on idea siitä, kuinka voit hallita toistuvia Ajax-vastauksia ilman setIntervalia.

1 Työn toiminto

Ensimmäinen asia, joka sinun on tehtävä, on kääriä työ, jonka aiot tehdä, omaan tehtäväänsä. Tämä tarkoittaa, että voit soittaa sille mistä tahansa muualta asiakaspuolen sovelluksessa tai jopa ajastimen yhteydessä (jos se on ehdottoman tarpeen).

Esimerkiksi :

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() {
      // ..
    });
}

Ja kuten näet, olen mennyt eteenpäin ja poistanut joitain yllä mainitsemistani toiminnoista.

2 Käsittele menestystä

Jos onnistut, voit käyttää anonyymiä funktiota $.post- funktion takaisinkutsuna. Ensisijainen argumentti, josta sinun pitäisi olla huolissaan, on vastausargumentti.

Tyypillisesti pidän siitä, että vastauksessani on menestys- ja epäonnistumisattribuutti. Tämä helpottaa tapauksen käsittelyä aina, kun vastaus on täysin onnistunut, mutta palvelimelta palannut data ei ollut sitä mitä odotin.

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() {
      // ...
    });
}

Tämä ei välttämättä tarkoita epäonnistumista. Se tarkoittaa vain sitä, että mitä etsin hakemaan, ei löytynyt.

3 Käsittele vika

Kääntöpuolella on aikoja, jolloin jokin voi epäonnistua. Miksi näin tapahtuu, voi johtua useista syistä, ja ymmärtääksesi asian oikein, kannattaa tarkistaa takaisinsoiton argumentit, nimittäin tila ja virhe.

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() {
      // ...
    });
}

En voi antaa tässä konkreettisia esimerkkejä, koska jokainen API on erilainen; Suosittelen kuitenkin ainakin tietojen kirjoittamista konsoliin, jotta ymmärrät mitä tapahtuu ja kuinka voit käsitellä sitä sulavasti kooditasolla.

4 Käsittele ehdotonta tapausta

Tässä nimenomaisessa tapauksessa tämä toiminto käynnistyy riippumatta siitä, onnistuiko jokin vai ei.

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

Tämä toiminto ei ole jotain, jota saatat aina tarvita (ei sanamuotoilua), mutta se on hyvä vaihtoehto esimerkiksi edistymispalkin piilottamiseen tai käyttöliittymän näyttämiseen. Tämä voi antaa käyttäjälle hieman palautetta siitä, että pyyntö on suorittanut työnsä (jälleen huolimatta epäonnistumisesta tai onnistumisesta).

5 Käsittele menestystä jälleen

Lopuksi totean, että tehty menetelmä on paljolti menestysmenetelmän kaltainen, mutta ajattele, että sitä on tarkoitus kutsua toisen kerran.

Tämä tarkoittaa, että kun vastaus on palannut palvelimelta vastausargumentilla, sama asia käynnistyy uudelleen, kun kaikki muu on suoritettu.

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

Tämä antaa sinulle toisen mahdollisuuden tehdä mitä tahansa haluat tehdä vastausargumentilla vielä kerran ennen kuin kaikki on valmis.

Käytän tätä harvoin, mutta joskus olen halunnut poistaa elementin vasta sen jälkeen, kun jotain on tehty, kaikki muu käsittely tehty ja vastaus on onnistunut.

Ehkä et tarvitse kaikkea

Ilmeisesti suuri osa yllä olevasta koodista on vain esittelyä pyyntöjen käsittelystä. Mutta tarkoituksena on näyttää, kuinka kyseinen pyyntö käsitellään ilman, että pyyntöjen pinoamiseen tarvitsee asettaa aikavälejä. Sen sijaan voit hyödyntää olemassa olevia toimintoja esimerkiksi kutsuaksesi funktiota uudelleen, jos tapahtuu virhe.

Joillekin tämä saattaa olla liioittelua, mutta toisille, jotka ovat tottuneet käyttämään setInterval -ohjelmaa, se voi olla paljon parempi tapa hallita Ajax-pyyntöjä, jotka eivät pinoudu ja käynnistävät saman pyynnön palvelimelle, kun vastaus on jo saatu. onnistui.

Ja loppujen lopuksi se on tavoite: Tehokas koodi, joka hakee tarvitsemamme tiedot ilman, että kolmannen osapuolen API tai oma käyttäjämme selain jumittuu.