Utilizarea Promise în solicitările ajax

După cum se poate vedea din exemplele temelor anterioare pentru crearea solicitărilor ajax sunt utilizate apeluri practic repetitive, care diferă doar prin detalii - șirul solicitării, funcțiile de procesare a răspunsului. Ar fi foarte util să creăm o abstracție comună pentru toate acțiunile legate de solicitarea ajax asincronă și apoi să o folosim la următoarele apeluri către server.

Pentru crearea unui nivel suplimentar de abstracție în acest caz, este convenabil să utilizăm obiectul Promise, care împachetează o operație asincronă într-un singur obiect, permițând definirea acțiunilor care se execută la finalizarea cu succes sau eșecul acelei operații.

Încapsulăm solicitarea asincronă într-un obiect Promise:

function get(url) {
   return new Promise((succeed, fail) => {
       const xhr = new XMLHttpRequest();
       xhr.open("GET", url);
       xhr.addEventListener("load", () => {
           if (xhr.status >= 200 && xhr.status < 400)
               succeed(xhr.response);
           else
               fail(new Error(`Solicitarea a eșuat: ${xhr.statusText}`));
       });
       xhr.addEventListener("error", () => fail(new Error("Eroare de rețea")));
       xhr.send();
   });
}

Metoda get primește ca parametru adresa resursei serverului și returnează un obiect Promise. Constructorul Promise primește ca parametru o funcție callback, care, la rândul său, acceptă doi parametri - două funcții: una se execută la procesarea cu succes a solicitării, iar cealaltă - la eșec.

Să presupunem că serverul este o aplicație simplă Node.js:

const http = require("http");
const fs = require("fs");

http.createServer(function(request, response){
   
   if(request.url == "/hello"){
       response.end("XMLHttpRequest pe FDC.COM");
   }
   else{
       fs.readFile("index.html", (_error, data) => response.end(data));
   }
}).listen(3000, () => console.log("Serverul a fost lansat la adresa http://localhost:3000"));

Acum apelăm metoda get pentru a efectua o solicitare către server:

get("http://localhost:3000/hello")
   .then(response => console.log(response))
   .catch(error => console.error(error));

Pentru a procesa rezultatul obiectului Promise se apelează metoda then(), care acceptă doi parametri: o funcție care se apelează la finalizarea cu succes a solicitării și o funcție care se apelează la eșec.

În acest caz, funcția din primul apel al metodei then primește răspunsul serverului și îl afișează pe consolă.

Pentru gestionarea erorilor, putem folosi metoda catch(), în care se transmite funcția de procesare a erorilor.

Într-un mod similar, putem trimite date către server folosind Promise:

function post(url, data) {
   return new Promise((succeed, fail) => {
       const xhr = new XMLHttpRequest();
       xhr.open("POST", url);
       xhr.addEventListener("load", () => {
           if (xhr.status >= 200 && xhr.status < 400)
               succeed(xhr.response);
           else
               fail(new Error(`Solicitarea a eșuat: ${xhr.statusText}`));
       });
       xhr.addEventListener("error", () => fail(new Error("Eroare de rețea")));
       xhr.send(data);
   });
}
post("http://localhost:3000/user", "Tom")
   .then(response => console.log(response))
   .catch(error => console.error(error));

În acest caz, la adresa "http://localhost:3000/user" va fi trimis șirul "Tom".