Първи стъпки с JavaScript обещания

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

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

обещание технически е стандартен вътрешен обект в JavaScript, което означава, че идва вграден в JavaScript. Използва се за представяне на евентуален резултат от асинхронен блоков код (или причината, поради която кодът е неуспешен) и има методи за контрол на изпълнение на асинхронния код.

Синтаксис

Можем да създадем инстанция на обещание обект използвайки нов ключова дума:

 new Promise (функция (разрешава, отхвърля) ); 

Функцията премина като параметър към Promise () конструктор е известен като изпълнител. Той съдържа асинхронен код и има два параметъра на функция Тип, така наричаното решение и отхвърляне функции (повече за тях скоро).

Държави - членки. \ T обещание обект

Най- Първоначално състояние на a обещание се нарича обект в очакване на. В това състояние, резултатът от асинхронното изчисление не съществува.

Първоначалното състояние на изчакване се променя на изпълнено посочете кога е изчислението успешен. Най- резултат от изчислението е налично в това състояние.

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

Да отида от в очакване на да се изпълнено състояние, решаване на () е наречен. Да отида от в очакване на да се отхвърлена състояние, отхвърляне () е наречен.

Най- тогава и улов методи

Когато държавата се променя от в очакване на да се изпълнено, манипулаторът на събитието на обещание на обекта тогава метод се изпълнява. И когато държавата се променя от в очакване на да се отхвърлена, манипулаторът на събитието на обещание на обекта улов метод се изпълнява.

Пример 1

“Non-Promisified” код

Да предположим, че има hello.txt файл, съдържащ “Здравейте” дума. Ето как можем да напишем AJAX заявка към донесе този файл и покаже съдържанието му, без да използвате обещание предмет:

 функция getTxt () нека xhr = нов XMLHttpRequest (); xhr.open („GET“, „hello.txt“); xhr.overrideMimeType ( "текст / обикновен '); xhr.send (); xhr.onload = function () try switch (this.status) случай 200: document.write (this.response); прекъсване; случай 404: изхвърлете 'File Not Found'; default: хвърли 'Неуспешно извличане на файла';  catch (err) console.log (err);  getTxt (); 

Ако съдържанието на файла е било изтеглени успешно, т.е.. кодът за състояние на отговор е 200, текстът за отговор е в документа. Ако файлът е не е намерен (състояние 404), а “Файлът не е намерен” изхвърлено съобщение за грешка. В противен случай: a съобщение за обща грешка показващ неуспеха при извличането на файла.

“Promisified” код

Сега, нека Посочете горния код:

 функция getTxt () return new Promise (функция (разреши, отхвърли) нека xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.send (); xhr.onload = function () switch (this.status) случай 200: разреши (this.response); случай 404: отхвърля ('File Not Found'); по подразбиране: отхвърля ('Failed to извлича файла ');;);  getTxt (). (функция (txt) document.write (txt);). catch (функция (err) console.log (err);); 

Най- getTxt () функцията вече е кодирана връща нова инстанция на обещание обект, и неговата изпълнителна функция държи асинхронния код от преди.

Когато код за състояние на отговор е 200, на обещание е изпълнено от повикване решаване на () (отговорът се предава като параметър на решаване на ()). Когато кодът на състоянието е 404 или някой друг,. \ T обещание е отхвърлена използвайки отхвърляне () (с подходящо съобщение за грешка като параметър на отхвърляне ()).

Най- събития за събития тогава() и улова () методи от обещание обект добавен в края.

Когато обещание е изпълнено, ръководителя на тогава() Методът се изпълнява. Аргументът му е параметърът, от който е преминал решаване на (). Вътре в манипулатора на събития, текстът на отговор (получен като аргумент) е в документа.

Когато обещание е отхвърлена, манипулаторът на събитието на улова () Методът се изпълнява, записване на грешката.

Най- основно предимство на горепосочената Профилирана версия на кода е обработка на грешки. Вместо да хвърлят Неизкоренени изключения наоколо - като в непромоционалната версия - на подходящи съобщения за неизправност се връщат и регистрират.

Но това не е само връщане от съобщения за неизправност но и на резултат от асинхронното изчисление това може да бъде наистина изгодно за нас. За да видим това, ще трябва да разширим нашия пример.

Пример 2

“Non-Promisified” код

Вместо просто да показвате текста от hello.txt, искам да комбинирайте с “свят” дума и го покажете на екрана след изтичане на 2 секунди. Ето кода, който използвам:

 функция getTxt () нека xhr = нов XMLHttpRequest (); xhr.open („GET“, „hello.txt“); xhr.overrideMimeType ( "текст / обикновен '); xhr.send (); xhr.onload = function () try switch (this.status) случай 200: document.write (concatTxt (this.response)); прекъсване; случай 404: изхвърлете 'File Not Found'; default: хвърли 'Неуспешно извличане на файла';  catch (err) console.log (err);  функция concatTxt (res) setTimeout (функция () return (res + 'World'), 2000);  getTxt (); 

На кода на състоянието 200, concatTxt () функцията се извиква свържете текста на отговора с “свят” дума преди да го напишете в документ.

Но този код няма да работи по желание. Най- setTimeout () функция за обратно извикване не може да върне конкатенирания низ. Това, което ще бъде отпечатано в документа, е неопределен защото това е Какво concatTxt () се завръща.

“Promisified” код

Така че, за да накараме кода да работи, нека Посочете горния код, включително concatTxt ():

 функция getTxt () return new Promise (функция (разреши, отхвърли) нека xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.send (); xhr.onload = function () switch (this.status) случай 200: разреши (this.response); случай 404: отхвърля ('File Not Found'); по подразбиране: отхвърля ('Failed to извлича файла ');;);  функция concatTxt (txt) return new Promise (функция (разрешава, отхвърля) setTimeout (функция () разреши (txt + 'World');, 2000););  getTxt (), след това ((txt) => върнете concatTxt (txt);) тогава ((txt) => document.write (txt);) catch ((err) => console. log (грешка);); 

Точно като getTxt (), на concatTxt () функция връща ново обещание обект вместо конкатенирания текст. Най- обещание върнато от concatTxt () е решен вътре в функцията за обратно извикване на setTimeout ().

Близо до края на горния код, обработващият събитие на първия тогава() Методът се изпълнява, когато обещание на getTxt () е изпълнено, когато файлът е изтеглени успешно. Вътре в този манипулатор, concatTxt () е наречен и обещание върнато от concatTxt () се връща.

Управителят на събитието на втория тогава() Методът се изпълнява, когато обещание върнато от concatTxt () е изпълнено, т.е. изтичането на две секунди е приключило и решаване на () е наречен с конкатенирания низ като параметър.

накрая, улова () улови всички съобщения за изключения и неуспехи от двете обещания.

В тази разширена версия “Здравей свят” низът ще бъде успешно отпечатано към документа.