Paras tapa ajax-postauksille

Viestiketju alueella 'Ohjelmointi, pelikehitys ja muu sovelluskehitys' , aloittaja embedded, 23.05.2019.

Tagit:
  1. embedded

    embedded

    Viestejä:
    17
    Rekisteröitynyt:
    03.07.2018
    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.
     
  2. kaarlos

    kaarlos

    Viestejä:
    290
    Rekisteröitynyt:
    13.11.2016
    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.
     
  3. Paapaa

    Paapaa

    Viestejä:
    2 561
    Rekisteröitynyt:
    17.10.2016
    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ä.
     
  4. greenlight

    greenlight

    Viestejä:
    1 548
    Rekisteröitynyt:
    17.10.2016
    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.
     
  5. nnaku

    nnaku I'm object-oriented! Tukijäsen

    Viestejä:
    706
    Rekisteröitynyt:
    28.11.2016
    Kuvittelitko tosiaan olevasi ensimmäinen ihmiten tämän ongelman kipussa? Axios on varmaan paras universaali kirjasto http requille... :joy:

    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!


    Koodi:
    
    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)
      });
    
    
     
    Viimeksi muokattu: 26.05.2019
    embedded tykkää tästä.
  6. Zvona

    Zvona

    Viestejä:
    171
    Rekisteröitynyt:
    18.10.2016
    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
     
  7. embedded

    embedded

    Viestejä:
    17
    Rekisteröitynyt:
    03.07.2018
    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..
     
  8. nnaku

    nnaku I'm object-oriented! Tukijäsen

    Viestejä:
    706
    Rekisteröitynyt:
    28.11.2016
    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ä?

    Kyllä se oma koodi täytyy itse kirjottaa :lol:, 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.
     
    null tykkää tästä.
  9. oselotti

    oselotti

    Viestejä:
    334
    Rekisteröitynyt:
    02.11.2016
    Tällaisessa sovelluksessa muutaman kymmenen koodirivin korvaaminen Reduxilla ja middlewarella (+ niiden boilerplatella) on kyllä aika overkilliä. Jos fluxia haluaa tässä noudattaa, niin sen voi tehdä myös helposti itse ilman mitään kirjastoja.
     
  10. Paapaa

    Paapaa

    Viestejä:
    2 561
    Rekisteröitynyt:
    17.10.2016
    Enkä oikein keksi, mitä erityisiä hyötyjä joku Redux tässä ongelmassa toisi. Kun kyse on muutaman formin logiikasta. Overkill omastakin mielestä.