Урок за обещание на JavaScript: Разрешаване, отхвърляне и веригиране в JS и ES6

Обещанията са един от начините, по които можем да се справим с асинхронните операции в JavaScript. Много хора се борят с разбирането как работят Обещанията, така че в тази публикация ще се опитам да ги обясня възможно най-просто.

Обещанията са широка тема, така че не мога да навлизам във всички подробности в тази статия. Но ще намерите цялостно въведение в това, което са Promises, обяснения на термини като разрешаване, отхвърляне и вериги и пример за код за създаване и използване на Promises.

Предпоставка: За да разберете по-добре тази статия, разгледайте другата ми публикация за обратно извикване на JavaScript.

Какво е обещание?

Обещание в JavaScript е подобно на обещание в реалния живот. Когато обещаем в реалния живот, това е гаранция, че ще направим нещо в бъдеще. Защото обещания могат да се дават само за бъдещето.

Обещанието има 2 възможни резултата: или ще бъде спазено, когато му дойде времето, или няма.

Това е същото и за обещанията в JavaScript. Когато дефинираме обещание в JavaScript, то ще бъде разрешено, когато дойде времето, или ще бъде отхвърлено.

Обещания в JavaScript

На първо място, Обещанието е обект. Има 3 състояния на обекта Promise:

  • Изчаква: първоначално състояние, преди обещанието да успее или да не успее
  • Решено: Изпълнено обещание
  • Отхвърлено: Неуспешно обещание

Например, когато поискаме данни от сървъра с помощта на Promise, той ще бъде в режим на изчакване, докато получим данните си.

Ако постигнем да получим информацията от сървъра, Обещанието ще бъде разрешено успешно. Но ако не получим информацията, обещанието ще бъде в отхвърлено състояние.

Освен това, ако има множество заявки, след като първото обещание бъде разрешено (или отхвърлено), ще започне нов процес, към който можем да го прикачим директно чрез метод, наречен верига.

Ако предпочитате, можете да гледате и видео версията по-долу:

Каква е разликата между обратно извикване и обещания?

Основната разлика между функциите за обратно извикване и обещанията е, че ние прикачваме обратно повикване към обещание, вместо да го предаваме. Така че ние все още използваме функции за обратно извикване с Promises, но по различен начин (вериги).

Това е едно от най-големите предимства на използването на Promises, но защо?

Какво е верига?

Функциите за обратно извикване се използват самостоятелно за асинхронни операции в JavaScript в продължение на много години. Но в някои случаи използването на Promises може да бъде по-добър вариант.

Ако трябва да се извършат множество асинхронни операции и ако се опитаме да използваме добри стари обратни обаждания за тях, ще се озовем бързо в ситуация, наречена „обратно извикване“:

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

Ако обаче обработваме една и съща операция с Promises, тъй като можем да прикачим обратно извикване, вместо да ги предаваме, този път същият код по-горе изглежда много по-изчистен и по-лесен за четене:

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

Кодът малко по-горе показва как множество обратни обаждания могат да бъдат вериги едно след друго. Веригата е една от най-добрите характеристики на Promises.

Създаване и използване на обещание стъпка по стъпка

Първо, ние използваме конструктор за създаване на обект Promise:

const myPromise = new Promise();

Необходими са два параметъра, един за успех (разрешаване) и един за неуспех (отхвърляне):

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

И накрая, ще има условие. Ако условието е изпълнено, Обещанието ще бъде разрешено, в противен случай ще бъде отхвърлено:

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

Така че ние създадохме първото си обещание. Сега нека го използваме.

then () за разрешени обещания:

Ако прегледате снимката в началото на тази публикация, ще видите, че има 2 случая: Един за разрешени обещания и един за отхвърлени. Ако Обещанието бъде разрешено (случай на успех), тогава ще се случи нещо по-нататък (зависи от това какво правим с успешното Обещание).

myPromise.then();

Методът then () се извиква след разрешаване на Promise. Тогава можем да решим какво да правим с разрешеното Обещание.

Например, нека регистрираме съобщението в конзолата, която получихме от Promise:

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

catch () за отхвърлени обещания:

Методът then () обаче е само за разрешени обещания. Какво ще стане, ако Promise не успее? След това трябва да използваме метода catch ().

По същия начин прикачваме метода then (). Също така можем директно да прикачим метода catch () веднага след това ():

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

Така че, ако обещанието бъде отхвърлено, то ще премине към метода catch () и този път ще видим различно съобщение на конзолата.

Увийте

Така че ние създаваме обещание в JavaScript и го използваме за разрешени и отхвърлени случаи. Обещанията са по-широка тема и има много повече неща, които можете да научите за тях. Така че разбирането как работят отнема време.

Тази публикация е само въведение в Promises и се надявам, че е полезно за получаване на представа за това какво представляват JavaScript Promises и как да ги използвате.

Ако искате да научите повече за уеб разработката, не се колебайте да посетите моя Youtube канал за повече.

Thank you for reading!