Paras tapa ajax-postauksille

[embedded]

Olen nyt tehnyt muutaman laajemman ja normaalia monimutkaisemman ohjelman php+jquery:llä, käyttäen myös mysql & ja bootstrappia

Mutta ratkaisemattomaksi ongelmaksi on tullut se että kun suurin osa lomakkeiden lähettämisestä, sekä yksittäisten kenttien aputoiminnoista on ajaxilla, on virheiden ja erikoistilanteiden käsittely tuskaa ja vie koodia joka kerta 200 riviä.
Esim:

- kutsu lähettää jsonia, odottaa vastauksesi jsonia
- nappi pitää disabloida kutsun jälkeen n-sekunniksi tai kun ok vastaus tulee ettei käyttäjä voi klikata montaa kertaa
- jos tulee odotettu virhe jonka olen ottanut huomioon, se pitää tunnistaa ja poimia jsonin error-muuttujasta ja näyttää, ehkä myös logittaa tms.
- jos tulee odottamaton virhe, ei palvelin palautakkaan jsonia ja tästä tulee halt errori javascriptin suoritukseen. Tämä pitää ratkaista joka kerta try catch:illä ja se on jo montakymmmentä riviä koodia
- jos palvelimeen ei saada yhteyttä, tämäkin pitää ottaa huomioon

--> 200 riviä koodia joka ajax postauksessa

Millä tämä ratkaistaan? Haluan että koodi on yhä varmatoimista kuin ennemminkin, eli kuin venäläisen junan vessa. Mutta helpompi ja lyhyempi kirjoittaa.

Katsoin axios-kirjastosta muutaman esimerkin ja ei siinä ainakaan koodin kirjoittaminen vähentynyt tai helpottunut yhtään.

 

[kaarlos]

Oman kokemuksen perusteella näiden API-kutsujen ja niihin liittyvien sivuvaikutusten hallinta muuttuu suoraviivaiseksi mikäli siirtyy käyttämään Facebookin flux-arkkitehtuuria (Flux | Application Architecture for Building User Interfaces), jonka voi toteuttaa esimerkiksi Reduxilla jonka kylkeen voi kytkeä haluamansa middlewaren.

Lyhyesti flow muuttuu tällaiseksi:

1. Napin painallus lähettää actionin 'Hae tietoja'
2. Reducer ottaa kiinni 'Hae tietoja' actionin ja asettaa flagin 'tietojen haku käynnissä' päälle
   1. Komponentti kuuntelee kyseistä flagia ja sen seurauksena disabloi napin
3. Middleware (esim. redux-saga) ottaa kiinni 'Hae tietoja' actionin
   1. Middlewaren sisällä tehdään API-kutsu
      1. jos kutsu onnistuu, lähetetään action 'Tallenna tiedot stateen' jonka payloadiin leivotaan API-kutsun palauttama data halutussa muodossa
      2. jos kutsu epäonnistuu, lähetetään action 'Tietojen tallennus epäonnistui' johon pistetään kyytiin joku virhekoodi
4. (Case 'Kutsu onnistuu') Reducer ottaa kiinni 'Tallenna tiedot stateen' actionin ja tallentaa siinä tulleen datan stateen + settaa 'tietojen haku käynnissä flagin' pois päältä
   1. Komponentti huomaa muutoksen 'hae tietoja' flagissa
   2. Komponentti huomaa että API-kutsun palauttama data löytyy statesta ja tuottaa näkymän sen perusteella
5. (Case 'Kutsu epäonnistuu') Reducer ottaa kiinni 'Tietojen tallennus epäonnistui' actionin ja tallentaa siinä tulleen virhekoodin stateen + settaa 'tietojen haku käynnissä flagin' pois päältä
   1. Komponentti huomaa muutoksen 'hae tietoja' flagissa
      
   2. Komponentti huomaa että API-kutsun palauttama virhekoodi löytyy statesta ja näyttää käyttäjälle tarvittavaa informaatiota siihen liittyen

Tässä itse näkymän ei tarvitse ymmärtää kuin kuunnella muuttujia joista se on kiinnostunut Reduxin sisällä, sen sijaan että sen tarvitsisi ymmärtää asynkronisuudesta yhtään mitään.

 

[Paapaa]

200 riviä koodia joka ajax postauksessa

Jos logiikka eri formien kohdalla on pääpiirteissään sama, voisitko yrittää luoda yleiskäyttöisiä funktioita, jolloin ei ainakaan tarvitse toistaa samaa logiikkaa joka paikassa?

Näkemättä koodia on paha sanoa, miten tuota 200 riviä saisi typistettyä.

 

[greenlight]

Ongelmasi on siis siinä, ettet osaa kirjoittaa koodia, jota voisit copy-pasteilun sijaan käyttää esim. funktiota kutsumalla. Valitut tekniikat eivät oikeastaan liitty ongelmaan mitenkään vaan se on puhtaasti ohjelmointitaitokysymys.

Hienot ja monimutkaiset frameworkit ovat yksi mahdollisuus mutta pelkkä jQuerykin riittää eikä sitäkään tarvitse, jos haluaa natustella.

Esimerkiksi virheet voi palauttaa luokiteltuna lomakkeen kentän nimen perusteella, jolloin voit kirjoittaa funktion, joka näyttää virheilmoituksen suoraan liittyvän inputin yhteydessä. Yleiset virheet voi tulostaa vaikka data-attribuutilla tägättyyn elementtiin.

 

[nnaku]

Olen nyt tehnyt muutaman laajemman ja normaalia monimutkaisemman ohjelman php+jquery:llä, käyttäen myös mysql & ja bootstrappia

Mutta ratkaisemattomaksi ongelmaksi on tullut se että kun suurin osa lomakkeiden lähettämisestä, sekä yksittäisten kenttien aputoiminnoista on ajaxilla, on virheiden ja erikoistilanteiden käsittely tuskaa ja vie koodia joka kerta 200 riviä.
Esim:

- kutsu lähettää jsonia, odottaa vastauksesi jsonia
- nappi pitää disabloida kutsun jälkeen n-sekunniksi tai kun ok vastaus tulee ettei käyttäjä voi klikata montaa kertaa
- jos tulee odotettu virhe jonka olen ottanut huomioon, se pitää tunnistaa ja poimia jsonin error-muuttujasta ja näyttää, ehkä myös logittaa tms.
- jos tulee odottamaton virhe, ei palvelin palautakkaan jsonia ja tästä tulee halt errori javascriptin suoritukseen. Tämä pitää ratkaista joka kerta try catch:illä ja se on jo montakymmmentä riviä koodia
- jos palvelimeen ei saada yhteyttä, tämäkin pitää ottaa huomioon

--> 200 riviä koodia joka ajax postauksessa

Millä tämä ratkaistaan? Haluan että koodi on yhä varmatoimista kuin ennemminkin, eli kuin venäläisen junan vessa. Mutta helpompi ja lyhyempi kirjoittaa.

Katsoin axios-kirjastosta muutaman esimerkin ja ei siinä ainakaan koodin kirjoittaminen vähentynyt tai helpottunut yhtään.

Kuvittelitko tosiaan olevasi ensimmäinen ihmiten tämän ongelman kipussa? Axios on varmaan paras universaali kirjasto http requille...

Tee helpperi funkkarit ns. onExecute toiminnoille. kuten formin disablointi.
Tee globaalil error handler, eli funktio joka ottaa vastaan kaikki mahdollisest ja mahdottomat errorrit. Kirjota vaikka 500 riviä koodia ja UUDELLEEN KÄYTÄ niitä samoja rivejä.
Tee molemmat käyttäen Promisea.

Käytä jotain oikeasti toimivaa http kirjatoa, älä räpellä omias.. Esim juuri se axios!

function disable(elem){
  return new Promise((resolve, reject)=>{
  // disable el
  })
}

function enable(elem){
  return new Promise((resolve, reject)=>{
  // enable el
  })
}

function errorHandler(error){
  return new Promise((resolve, reject)=>{
  // handle error
  console.log(error);
  })
}

disable(elem)
  .then(()=>axios.get('url'))
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(errorHandler)
  .finally(function () {
    enable(elem)
  });

 

[Zvona]

Kuten veli @nnaku tuossa jo todisti, niin aika "helpolla" pääsee. Tein esimerkin käyttäen ihan selaimen omaa `fetch()`:ia, ja siitä tuli TS:n osalta alle 50 riviä kokonaisuudessaan: mystifying-hellman-bk63c - CodeSandbox

 

[embedded]

Kuvittelitko tosiaan olevasi ensimmäinen ihmiten tämän ongelman kipussa? Axios on varmaan paras universaali kirjasto http requille...

Tee helpperi funkkarit ns. onExecute toiminnoille. kuten formin disablointi.
Tee globaalil error handler, eli funktio joka ottaa vastaan kaikki mahdollisest ja mahdottomat errorrit. Kirjota vaikka 500 riviä koodia ja UUDELLEEN KÄYTÄ niitä samoja rivejä.
Tee molemmat käyttäen Promisea.

Käytä jotain oikeasti toimivaa http kirjatoa, älä räpellä omias.. Esim juuri se axios!
....

Axiosta katsoin, mutta vaikutti siltä muutaman blogipostauksen perusteella että jqueryn get() yms. wrapperit on helpompia.

Mutta kysymykseni siis tosiaankin oli että pitääkö nuo funktiot räpeltää itse, kun luulisi että sama ongelma ja samat tarpeet on kaikissa muissakin applikaatiossa ?!?! napin disablointi ja virheiden cätchäys ilman että javascriptin suoritus menee jumiin.

Siis tosiaanko pitää itse tehdä noi funktiot ?!
Eikö tuon ajaxkutsujan vielä saisi trycatcheineen omaan funktioonsa..

 

[nnaku]

...
Mutta kysymykseni siis tosiaankin oli että pitääkö nuo funktiot räpeltää itse, kun luulisi että sama ongelma ja samat tarpeet on kaikissa muissakin applikaatiossa ?!?! napin disablointi ja virheiden cätchäys ilman että javascriptin suoritus menee jumiin.
...

No onhan noita formien käsittely kirjastoja, mutta ovat hyvin generisiä eli joudut ne itse konffaamaan joka tapauksessa. Esim mistä kukaan voi tietää missä sanamuodossa haluat käyttäjälle palauttaa esim virhe tai onnistumis viestin? Mitä tehdään onnistuneen kutsun jälkeen tai mitä haluat virhetilantessa tapahtuvan? Ehkä joku korostu väri tai muu notifikaatio? Entä syötteen sanitointi ja validointi ennen lomakkeen lähetystä?

Siis tosiaanko pitää itse tehdä noi funktiot ?!
Eikö tuon ajaxkutsujan vielä saisi trycatcheineen omaan funktioonsa..

Kyllä se oma koodi täytyy itse kirjottaa , taito on ehkä osata jakaa koodi hyvin ja uudelleen käyttää sitä tarvittaessa. Esim kirjoittamalla geneerisiä functiota.

vanilla js pelkällä axiosilla.
static - CodeSandbox

Toki isomman lomakkeen validoinnin voisi hoitaa vaikka Yup. ei tarvis kirjotella ite kovin kauheita.

 

[Paapaa]

Enkä oikein keksi, mitä erityisiä hyötyjä joku Redux tässä ongelmassa toisi. Kun kyse on muutaman formin logiikasta. Overkill omastakin mielestä.

 

[embedded]

Laitetaampa tähän vielä tämmönen

jQuery Form Plugin

Vanha, mutta yhä elossa.
Mailchimp käyttää ainakin tuota wordpress-pluginissaan, mutta mailchimpin koodeja on kyllä haukuttu monessa paikkaa, joten ei välttämättä se paras idoli.

Mutta mutta, tätä kirjastoa käytettäessä saa todella hienoksi oman koodin (näin pikaisella vilkaisulla)