Substituir jQuery per JS : el cas jQuery.post (1)

Estic revisant el codi dels meus plugins on m’he proposat canviar el codi jQuery per funcions en JavaScript pur i simple.

M’he trobat amb algunes dificultats que vull documentar perquè no n’he trobat enlloc la sol·lució. Malgrat les dificultats, vull el·liminar, tot el jQuery que sigui possible als meus plugins per innecessari. Encara que em complico la vida!

Per exemple, aquest codi jQuery.post() m’ha donat moltíssima feina:

jQuery.post( 
    ajaxurl, 
    data, 
    ( response ) => {  
       console.log(response);
       tmp_array = JSON.parse(response); 
       /* més codi */
    } );  

/* Important: data = {action:'action_name', data:'data sentence'  }

Pren nota que he hagut de canviar l’objecte data utilitzant “URLSearchParams” i cal enviar amb format ”application/x-www-form-urlencoded‘ perquè es llegirà a $_POST. Les dades van en el ‘body‘.

Però, el que més m’ha sobtat és que m’ha calgut ‘incloure un pas intermedi: “then( response => response.json() )” , que suposo que jQuery ja feia internament!

Finalment el codi s’ha transformat en un “fetch” amb el següent codi en pur i simple JS:

fetch( ajaxurl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: data,
}).then( response => response.json() )
  .then(response => {
    console.log(response);
    tmp_array = response; 
    /* altre codi */
});

/* Important: URLSearchParams: data = new URLSearchParams({action:'action_name', data:'data sentence'  }) */

L’explicació de MDN Web Docs no és senzilla:

The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.

[…] result of taking JSON as input and parsing it to produce a JavaScript object.

https://developer.mozilla.org/en-US/docs/Web/API/Response/json

Per tant , em caldrà repassar la teoria de Promises: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises.

Si puc, intentaré afegir articles sobre altres casos de la transformació de jQuery a JS.