Promisiunile sunt unul dintre modurile în care putem face față operațiunilor asincrone în JavaScript. Mulți oameni se luptă să înțeleagă cum funcționează Promisiunile, așa că în această postare voi încerca să le explic cât de simplu pot.

Promisiunile sunt un subiect larg, așa că nu pot intra în fiecare detaliu în acest articol. Dar veți găsi o introducere generală a ceea ce sunt Promisiunile, explicații ale termenilor precum rezolvare, respingere și înlănțuire și un exemplu de cod pentru crearea și utilizarea Promisiunilor.

Condiție preliminară: Pentru a înțelege mai bine acest articol, consultați cealaltă postare despre rambursări JavaScript.

Ce este o promisiune?

O promisiune în JavaScript este similară cu o promisiune din viața reală. Când facem o promisiune în viața reală, este o garanție că vom face ceva în viitor. Pentru că promisiunile pot fi făcute doar pentru viitor.

O promisiune are 2 rezultate posibile: fie va fi păstrată când va veni momentul, fie nu va fi.

ad-banner

Acest lucru este la fel și pentru promisiunile din JavaScript. Când definim o promisiune în JavaScript, aceasta va fi rezolvată când va veni momentul sau va fi respinsă.

Promisiuni în JavaScript

În primul rând, o Promisiune este un obiect. Există 3 stări ale obiectului Promise:

  • In asteptarea: Starea inițială, înainte ca Promisiunea să reușească sau să eșueze
  • S-a rezolvat: Promisiunea finalizată
  • Respins: Promisiunea nu a reușit
Tutorial JavaScript Promise Rezolvare respingere si inlantuire in JS si
Reprezentarea procesului Promisiunilor

De exemplu, atunci când solicităm date de la server folosind o promisiune, acestea vor fi în modul în așteptare până când vom primi datele noastre.

Dacă reușim să obținem informațiile de pe server, Promisiunea va fi rezolvată cu succes. Dar dacă nu primim informațiile, atunci Promisiunea va fi în starea respinsă.

În plus, dacă există mai multe cereri, atunci după ce prima Promisiune este rezolvată (sau respinsă), va începe un nou proces la care îl putem atașa direct printr-o metodă numită înlănțuire.

Dacă preferați, puteți viziona și versiunea video de mai jos:

Care este diferența dintre Rambursări și Promisiuni?

Principala diferență între Funcțiile de apel invers și Promisiunile este că atașăm un apel invers la o promisiune, mai degrabă decât să o transmitem. Deci, încă folosim funcții de apel invers cu Promisiunile, dar într-un mod diferit (înlănțuire).

Acesta este unul dintre cele mai mari avantaje ale utilizării Promisiunilor, dar de ce?

Ce este Înlănțuirea?

Funcțiile de apel invers au fost utilizate singure pentru operațiuni asincrone în JavaScript de mulți ani. Dar, în unele cazuri, utilizarea Promisiunilor poate fi o opțiune mai bună.

Dacă sunt de făcut mai multe operații de asincronizare și dacă încercăm să folosim apeluri vechi pentru ele, ne vom găsi rapid într-o situație numită Răspuns iad:

firstRequest(function(response) {  
    secondRequest(response, function(nextResponse) {    
        thirdRequest(nextResponse, function(finalResponse) {     
            console.log('Final response: ' + finalResponse);    
        }, failureCallback);  
    }, failureCallback);
}, failureCallback);

Cu toate acestea, dacă gestionăm aceeași operație cu Promisiunile, deoarece putem atașa apeluri inversă decât să le transmitem, de data aceasta același cod de mai sus pare mult mai curat și mai ușor de citit:

firstRequest()
  .then(function(response) {
    return secondRequest(response);
}).then(function(nextResponse) {  
    return thirdRequest(nextResponse);
}).then(function(finalResponse) {  
    console.log('Final response: ' + finalResponse);
}).catch(failureCallback);

Codul de mai sus arată cum pot fi înlănțuite mai multe apeluri de apel unul după altul. Înlănțuirea este una dintre cele mai bune caracteristici ale Promisiunilor.

Crearea și utilizarea unei promisiuni pas cu pas

În primul rând, folosim un constructor pentru a crea un obiect Promise:

const myPromise = new Promise();

Este nevoie de doi parametri, unul pentru succes (rezolvare) și unul pentru eșec (respingere):

const myPromise = new Promise((resolve, reject) => {  
    // condition
});

În cele din urmă, va exista o condiție. Dacă condiția este îndeplinită, Promisiunea va fi rezolvată, altfel va fi respinsă:

const myPromise = new Promise((resolve, reject) => {  
    let condition;  
    
    if(condition is met) {    
        resolve('Promise is resolved successfully.');  
    } else {    
        reject('Promise is rejected');  
    }
});

Așa că am creat prima noastră Promisiune. Acum să-l folosim.

apoi () pentru promisiuni rezolvate:

Dacă revizuiți imaginea la începutul acestei postări, veți vedea că există 2 cazuri: unul pentru promisiunile rezolvate și unul pentru respinse. Dacă Promisiunea se rezolvă (caz de succes), atunci se va întâmpla ceva în continuare (depinde de ceea ce facem cu Promisiunea de succes).

myPromise.then();

Metoda then () este apelată după ce Promisiunea este rezolvată. Atunci putem decide ce să facem cu Promisiunea rezolvată.

De exemplu, să înregistrăm mesajul pe consolă pe care l-am primit de la Promise:

myPromise.then((message) => {  
    console.log(message);
});

catch () pentru promisiuni respinse:

Cu toate acestea, metoda atunci () este doar pentru promisiuni rezolvate. Ce se întâmplă dacă Promisiunea eșuează? Apoi, trebuie să folosim metoda catch ().

La fel atașăm metoda then (). De asemenea, putem atașa direct metoda catch () imediat după ():

myPromise.then((message) => { 
    console.log(message);
}).catch((message) => { 
    console.log(message);
});

Deci, dacă promisiunea va fi respinsă, va trece la metoda catch () și de data aceasta vom vedea un mesaj diferit pe consolă.

Învelire

Deci, astfel creăm o promisiune în JavaScript și o folosim pentru cazurile rezolvate și respinse. Promisiunile sunt un subiect mai larg și mai sunt multe lucruri de învățat despre ele. Așadar, înțelegerea modului în care funcționează necesită timp.

Această postare este doar o introducere la Promisiunile și sper că ți s-a părut utilă pentru a-ți face o idee despre ce sunt promisiunile JavaScript și cum să le folosești.

Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați să mă vizitați Canalul canalului YouTube pentru mai mult.

Mulțumesc că ai citit!