Начало работы с обещаниями JavaScript

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

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

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

Синтаксис

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

 новое обещание (функция (решить, отклонить) ); 

Функция передается в качестве параметра к Promise () Конструктор известен как исполнитель. Он содержит асинхронный код и имеет два параметра функция тип, упоминается как разрешить а также отклонять функции (подробнее об этом в ближайшее время).

Государства обещание объект

начальное состояние из обещание объект называется в ожидании. В этом состоянии результат асинхронного вычисления не существует.

Начальное состояние ожидания изменяется на выполнены состояние, когда вычисление успешный. результат вычисления доступен в этом состоянии.

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

Идти от в ожидании в выполнены государство, разрешить() называется. Идти от в ожидании в отвергнуто государство, отвергнуть () называется.

затем а также ловить методы

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

Пример 1

“Non-Promisified” код

Предположим, что есть hello.txt файл, содержащий “Привет” слово. Вот как мы можем написать запрос AJAX получить этот файл а также показать его содержание, без использования обещание объект:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'текст / обычный'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (this.response); перерыв; дело 404: выбросить «Файл не найден»; по умолчанию: throw 'Не удалось получить файл';  catch (err) console.log (err);  getTxt (); 

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

“Promisified” код

Теперь давайте Пообещать вышеуказанный код:

 function getTxt () вернуть новое Promise (функция (разрешить, отклонить) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resol (this.response); case 404: reject ('File Not Found'); по умолчанию: reject ('Failed to получить файл ');;);  getTxt (). then (function (txt) document.write (txt);). catch (function (err) console.log (err);); 

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

Когда Код статуса ответа 200, обещание является выполнены от призвание разрешить() (ответ передается как параметр разрешить()). Когда код состояния 404 или какой-либо другой, обещание является отвергнуто с помощью отвергнуть () (с соответствующим сообщением об ошибке в качестве параметра отвергнуть ()).

обработчики событий для затем() а также ловить() методы из обещание объект добавлено в конце.

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

Когда обещание является отвергнуто, обработчик события ловить() метод запущен, регистрация ошибки.

главное преимущество вышеупомянутой Обещанной версии кода является обработка ошибок. Вместо того, чтобы бросать Uncaught Exceptions вокруг - как в Необещенной версии - соответствующие сообщения об ошибках возвращены и зарегистрированы.

Но это не только возврате из сообщения об ошибках но и из результат асинхронного вычисления это может быть действительно выгодно для нас. Чтобы увидеть это, нам нужно расширить наш пример.

Пример 2

“Non-Promisified” код

Вместо того, чтобы просто отображать текст из hello.txt, я бы хотел объединить это с “Мир” слово и отобразить его на экране по истечении 2 секунд. Вот код, который я использую:

 function getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ( 'текст / обычный'); xhr.send (); xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response)); перерыв; дело 404: выбросить «Файл не найден»; по умолчанию: throw 'Не удалось получить файл';  catch (err) console.log (err);  function concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

На коде состояния 200 concatTxt () функция вызывается объединить текст ответа с “Мир” слово перед записью в документ.

Но этот код не будет работать как хотелось. SetTimeout () функция обратного вызова не может вернуть объединенную строку. Что будет распечатано в документе не определено потому что это какие concatTxt () возвращается.

“Promisified” код

Итак, чтобы код работал, давайте Пообещать вышеуказанный код, в том числе concatTxt ():

 function getTxt () вернуть новое Promise (функция (разрешить, отклонить) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: resol (this.response); case 404: reject ('File Not Found'); по умолчанию: reject ('Failed to получить файл ');;);  function concatTxt (txt) вернуть новое обещание (функция (разрешить, отклонить) setTimeout (function () resol (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);). catch ((err) => console. log (err);); 

Как getTxt (), concatTxt () функция также возвращает новый обещание объект вместо составного текста. обещание вернулся concatTxt () является разрешена внутри функции обратного вызова SetTimeout ().

Рядом с концом приведенного выше кода обработчик события первого затем() метод работает, когда обещание из getTxt () является выполнены, то есть когда файл успешно доставлено. Внутри этого обработчика, concatTxt () называется и обещание вернулся concatTxt () возвращается.

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

в заключение, ловить() ловит все исключения и сообщения об ошибках из обоих обещаний.

В этой Обещанной версии “Привет, мир” строка будет успешно распечатан к документу.