ProMISe
Приложение ProMISe — это удобный инструмент для набора инструментов для непрерывного улучшения: ProMISe. Просто зарегистрировать неисправность, время простоя или время оператора никогда не было проще. Удобно для сбоев в производстве, безопасности, внутренней логистике и т. Д.
С приложением ProMISe вы можете легко:
— Зарегистрируйте время начала и время простоя
— Отправить несколько фотографий неисправности
— дать описание неисправности
— Укажите точную часть и местоположение
Даже если нет WiFi или мобильного покрытия. И все за несколько секунд! Сообщение немедленно регистрируется в ProMISe, и оператор может немедленно продолжить устранение простоя. Позже регистрация может быть обработана на компьютере для дальнейшего анализа. Приложение ProMISe, таким образом, вносит свой вклад в процесс постоянного улучшения.
Источник: play.google.com
Урок 5. JavaScript. Promise. Что это, как работает (+ пример)
JavaScript Promise с примерами
По умолчанию код в JavaScript выполняется последовательно (в одном потоке, синхронно). То есть таким образом, когда каждая следующая операция ждёт завершения предыдущей.
На сайте очень часто встречаются задачи, для выполнения которых требуется значительное время. Если их реализовать с помощью синхронного кода, то это может привести к тому, что страницы будут подвисать (т.е. с ними нельзя будет взаимодействовать некоторое время). Таким образом, возможно возникновение негативного пользовательского опыта при использовании такого сайта и таких сценариев конечно лучше не допускать.
Чтобы этого избежать необходимо использовать асинхронный код. Он в отличие от синхронного выполняется в фоновом режиме и не блокирует основной поток. Т.е. код, расположенный после него выполняется сразу же, не дожидаясь его завершения.
Асинхронный код в JavaScript может быть написан разными способами : с помощью обратных вызовов, promise (обещаний) и ключевых слов async/await .
В этой статье рассмотрим, как это сделать с помощью promise .
Promise (промисы, обещания) – это специальный объект и набор методов в JavaScript для удобного написания асинхронного кода.
В отличие от обратных вызовов промисы позволяют решать асинхронные задачи значительно проще без создания большого количества вложенностей одних функций в другие.
Изучение промисов начнём с рассмотрения примера из реальной жизни .
Допустим, папа обещает дать 100$, если вы сдадите завтрашний экзамен на хорошо или отлично.
В данный момент вы находитесь в состоянии ожидания, т.к. не знаете какую отметку вы получите, а следовательно, не знаете получите ли вы бонус в размере 100$.
Но как только вы получите отметку по экзамену, обещание завершится. Далее в зависимости от того успешно оно завершилось или нет будет зависеть получите ли вы 100$ или нет.
Просто о promise в JavaScript
На JavaScript этот пример с помощью promise реализуется следующим образом:
// создадим новый промис const promise = new Promise((resolve, reject) => { // оценку, которые мы получим определим случайным образом спустя некоторое время (например, 5 секунд) setTimeout(() => { // сгенерируем оценку от 2 до 5 const mark = Math.floor(Math.random() * 4) + 2; // если оценка больше 3, то. if (mark > 3) { // завершим промис успешно: для этого вызовем функцию resolve() и передадим ей в скобках полученную оценку (это нужно для того, чтобы мы затем её могли получить в методе then()) resolve(mark); } // завершим промис с ошибкой reject(mark); }, 5000); }); // выполнение действий после завершения промиса выполняется с помощью методов: then (в случае успеха) и catch (при ошибке) promise .then(result => console.log(`Ура! Я сдал экзамен на ${result}! Папа, как и обещал дал мне 100$.`)) .catch(result => console.log(`Увы, я получил оценку ${result}! Папа мне не дал 100$`));
А теперь разберём как всё это работает, и начнём с создания промиса.
Создание промиса
Начинается процесс написания промиса с его создания. Осуществляется это с помощью конструктора, т.е. с new Promise() :
const promise = new Promise((resolve, reject) => { // асинхронный код });
Конструктор промиса принимает 2 аргумента, которые являются функциями. Первый аргумент обычно называют resolve , а второй – reject . Внутрь промиса помещают асинхронный код, можно конечно и синхронный, но тогда в этом не будет смысла.
Промис завершает своё выполнение, когда вызывается функция resolve() или reject() .
Функцию resolve() вызывают обычно в том месте кода, в котором асинхронная операция должна завершиться успешно. А функцию reject() – там, где она должна завершиться с ошибкой.
Состояния, в которых может находиться промис
Промис начинается с состояния ожидания ( state: «pending» ). Оно говорит о том, что он ещё не выполнен (результат undefined ).
Промис завершается после вызова resolve() или reject() . При этом его состояние переходит соответственно в выполнено ( state: «fulfilled» ) или отклонено ( state: «rejected» ).
Внутрь функций resolve() или reject() можно поместить аргумент, который затем будет доступен соответственно в then() или catch() .
// сдал ли экзамен const passexam = true; // промис const result = new Promise((resolve, reject) => { setTimeout(() => { passexam ? resolve(‘Папа подарил 100$.’) : reject(‘Папа не подарил 100$.’); }, 5000); }); result .then(value => { console.log(result); console.log(value); }) .catch(value => { console.log(result); console.error(value); });
Когда passexam равен true , промис успешно завершится через 5 секунд посредством вызова функции resolve() . А так как промис завершился успешно, то будет вызван метод then() .
Если значение константы passexam поменять на false , то промис завершится с ошибкой через 5 секунд с помощью вызова функции reject() . А так как в этом случае промис завершился с ошибкой, то, следовательно, будет вызван catch() .
Методы промисов
У каждого промиса есть определённый набор методов, которые мы можем использовать:
- then – выполняется, когда промис завершился успешно (после вызова функции resolve() );
- catch – вызывается, если промис завершается ошибкой (после вызова reject() );
- finally – выполняется в любом случае после завершения промиса, вне зависимости от конечного состояния.
?/ promise — промис promise .then((value) => { // . }) .catch((error) => { // . }) .finally(() => { // . });
Пример с использованием всех трёх методов:
Новая попытка let isProcess = false; elResult = document.querySelector(‘#result’); document.querySelector(‘#run’).onclick = () => { if (isProcess) { elResult.textContent = ‘Подождите! Задача ещё выполняется!’; return; } isProcess = true; elResult.textContent = ‘Задача в процессе. ‘; const promise = new Promise((resolve, reject) => { setTimeout(() => { const mark = Math.floor(Math.random() * 4) + 2; mark > 3 ? resolve(mark) : reject(mark); }, 5000); }); promise .then(value => { elResult.textContent = `Ура! Вы сдали экзамен на ${value}!
Папа, как и обещал дал вам 100$.`; }) .catch(value => { elResult.textContent = `Увы, вы получили оценку ${value}! Папа не дал вам 100$`; }) .finally(() => { isProcess = false; }); }
При этом then() позволяет обработать не только успех, но и ошибку. Для этого необходимо передать функцию в качестве второго аргумента.
// promise – промис promise.then( value => { // действия при успешном завершении промиса }, error => { // действия при завершении промиса с ошибкой } );
Второй аргумент указывать не обязательно, в этом случае он будет реагировать только на успех:
// promise – промис promise.then(value => { // действия при успешном завершении промиса });
Для того чтобы получить значение из промиса в методах then() и catch() как уже было отмечено выше необходимо его передать в функции resolve() и reject() .
Цепочка промисов
Цепочка промисов – это простая концепция, в основу которой положено то, что методы промисов тоже в качестве результата возвращают промис. А так как они возвращают промис, то мы для них в свою очередь тоже можем вызвать методы и т.д. Таким образом, мы можем создавать цепочку из промисов, каждый из которых выполняется только после того как завершился предыдущий.
По простому цепочка промисов позволяет очень компактно записать код для последовательного выполнения нескольких асинхронных задач, каждая из которых должна выполняется после завершения предыдущей.
Пример цепочки промисов:
const promise = new Promise(resolve => { setTimeout(() => resolve(2), 3000); }); promise .then(value => { console.log(value); return new Promise(resolve => { setTimeout(() => resolve(value * 2), 3000); }); }) .then(value => { console.log(value); return new Promise(resolve => { setTimeout(() => resolve(value * 2), 3000); }); }) .then(value => console.log(value))
- сначала выполняется первый промис, который успешно завершится через 3 секунды со значением 2;
- после этого выполнится метод then() , который выведет в консоль значение переменной value , которое равно аргументу, переданному в resolve() и возвратит в качестве результата новый промис; он также как и предыдущий успешно завершится через 3 секунды со значением value * 2 ;
- затем выполнится следующий then() , он выполнит действия аналогично предыдущему then() ;
- дальше выполнится последний then() , который просто выведет в консоль значение параметра value .
Promice.all() и Promise.race()
Promice.all() и Promise.race() – это статические методы Promice , которые принимают на вход массив промисов и возвращают новый промис.
В случае с Promice.all() промис завершится когда завершатся все промисы в массиве.
const promise1 = new Promise(resolve => setTimeout(resolve, 1000, ‘one’)); const promise2 = new Promise(resolve => setTimeout(resolve, 2000, ‘two’)); const promise3 = new Promise(resolve => setTimeout(resolve, 3000, ‘three’)); Promise.all([promise1, promise2, promise3]).then(value => console.log(value)); // [‘one’, ‘two’, ‘three’]
При использовании Promise.race() промис завершится, как только выполнится первый промис из массива.
const promise1 = new Promise(resolve => setTimeout(resolve, 1000, ‘one’)); const promise2 = new Promise(resolve => setTimeout(resolve, 2000, ‘two’)); const promise3 = new Promise(resolve => setTimeout(resolve, 3000, ‘three’)); Promise.race([promise1, promise2, promise3]).then(value => console.log(value)); // ‘one’
Задачи
1. Асинхронный код, ниже реализованный с использованием функций обратного вызова, необходимо переписать через промисы:
Получить текст с сервера const request = (url, success, error) => { const xhr = new XMLHttpRequest(); xhr.open(‘GET’, url); xhr.onload = () => { xhr.status === 200 ? success(xhr.response) : error(xhr.statusText); } xhr.onerror = () => error(xhr.statusText); xhr.send(); } document.querySelector(‘#get-text’).onclick = () => { request(‘/examples/ajax/01.html’, data => { document.querySelector(‘#result’).innerHTML = data; }, error => { console.error(error); }); }
2. Напишите функцию, с помощью которой можно будет выполнять различные действия с задержкой.
// функция, которую нужно реализовать const sleep = ms => { . } // её использование для выполнения действия с задержкой 5 секунд sleep(5000).then(() => { console.log(‘Выполнилось через 5 секунд!’); }); // её использование для выполнения действия с задержкой 10 секунд sleep(10000).then(() => { console.log(‘Выполнилось через 10 секунд!’); });
3. Перепишите код для динамической загрузки скриптов в определенном порядке через промисы:
Источник: itchief.ru
Знакомство с promises — одним из нововведений ES6
Вообще говоря, promises (дословно — «обещания») — это обёртки для функций обратного вызова (callback). Их можно использовать для упорядочивания синхронных и асинхронных действий.
С помощью promises вы сможете переписать:
$.ajax(< url: ‘/value’, success: function(value) < var result = parseInt(value) + 10; setTimeout(function() < console.log(result); >, 5000); > >);
ajax(< url: ‘/value’ >).then(function(value) < return parseInt(value) + 10; >).then( delay(5000) ).then(function(result) < console.log(result); >)
Может быть непонятно, почему нижний вариант лучше — а лучше он потому, что в нём отсутствует вложенность. Представьте, что наш пример гораздо длиннее. Верхний вариант имел бы дюжину вложенных функций и был бы очень трудночитаем, тогда как нижняя версия представляла бы собой прямолинейную последовательность действий и мало отличалась бы от случая синхронных действий.
Обещание поддерживает 2 метода: then и catch . then принимает продолжение, являющееся функцией обратного вызова, принимающей результат в качестве аргумента и возвращающей новое обещание или другое значение. Аналогично, catch — это callback, вызываемый при возникновении исключения или другой ошибки.
Полная версия then в себя оба поведения:
promise.then(onFullfilled, onRejected)
Так, catch можно определить следующим образом:
promise.catch(onRejected) := promise.then(null, onRejected)
Как создать обещание?
Для создания обещания вам не нужно создавать объект с методами then и catch . Вместо этого можно использовать конструктор Promise :
var promise = new Promise(function(resolve, reject) < // maybe do some async stuff in here resolve(‘result’); >);
Достаточно вызвать resolve , когда обещание выполнено, или вызвать reject , если что-то пошло не так. Также можно сгенерировать исключение. Если вы хотите обернуть значение в обещание, которое будет выполнено немедленно, можно просто написать Promise.resolve(value) . В обратном случае достаточно написать Promise.reject(error) .
Таймауты
Функция setTimeout используется для выполнения кода после определенной задержки. Вот её версия, реализованная с помощью promises:
function delay(milliseconds) < return function(result) < return new Promise(function(resolve, reject) < setTimeout(function() < resolve(result); >, milliseconds); >); >; >
Вот пример использования:
delay(1000)(‘hello’).then(function(result) < console.log(result); >);
Вы можете удивиться, что delay каррирована. Это сделано для того, чтобы её можно было включить в последовательность после другого обещания:
somePromise.then(delay(1000)).then(function() < console.log(‘1 second after somePromise!’); >);
AJAX
AJAX — классический пример использования promises. Если вы используете jQuery, вы увидите, что $.ajax не вполне совместима с promises, потому что не поддерживает catch . Но мы с легкостью можем создать обёртку:
function ajax(options) < return new Promise(function(resolve, reject) < $.ajax(options).done(resolve).fail(reject); >); >
ajax(< url: ‘/’ >).then(function(result) < console.log(result); >);
Или, если вы не пользуетесь jQuery, вы можете создать обёртку для XMLHttpRequest :
function ajax(url, method, data) < return new Promise(function(resolve, reject) < var request = new XMLHttpRequest(); request.responseType = ‘text’; request.onreadystatechange = function() < if (request.readyState === XMLHttpRequest.DONE) < if (request.status === 200) < resolve(request.responseText); >else < reject(Error(request.statusText)); >> >; request.onerror = function() < reject(Error(«Network Error»)); >; request.open(method, url, true); request.send(data); >); >
ajax(‘/’, ‘GET’).then(function(result) < console.log(result); >);
Отложенное исполнение
Вопрос: в каком порядке будут выведены строки после исполнения этого кода?
new Promise(function(resolve, reject) < console.log(‘A’); resolve(); >).then(function() < console.log(‘B’); >); console.log(‘C’);
Ответ: A , C , затем B .
Удивительно, правда? then —переходник отложен, а тот, что передан в конструктор Promise — нет. Но мы можем воспользоваться таким поведением then . Часто хочется отложить выполнение некоторого куска кода до завершения асинхронной части. Раньше для этого можно было использовать setTimeout(func, 1) но теперь для этого можно написать обещание:
var defer = Promise.resolve();
Его можно использовать так:
defer.then(function() < console.log(‘A’); >); console.log(‘B’);
Этот код выведет B , затем A . Хотя это и не короче, чем setTimeout(func, 1) , это разъясняет наши намерения и совместимо с другими обещаниями. Таким образом, мы получаем более структурированный код.
Финальные замечания
Истинная ценность обещаний проявляется, когда весь асинхронный код структурирован с их помощью. Используя компонуемые обещания для таймеров или AJAX-действий, легко избежать вложенности и писать более линейный код.
Я был удивлён несколькими вещами:
- Функции обратного вызова для then и catch могут возвращать любое значение, но они ведут себя по-другому. Обычно, возвращаемое значение передаётся следующему за then выражению в цепочке. Но если это значение — обещание, дальше передаётся значение, возвращаемое обещанием при его выполнении. Это значит, что возврат Promise.resolve(x) эквивалентен возврату x .
- Функция, переданная в конструктор Promise , выполняется синхронно, но любые продолжения через then или catch будут отложены до следующего цикла событий. Этим объясняется работа defer .
- catch — это зарезервированное ключевое слово, используемое для обработки исключений в JavaScript, но это также и имя метода, закрепляющего обработчик ошибок в обещании. Это похоже на неудачную коллизию имён. С другой стороны, это облегчает запоминание, так что не всё так плохо!
Первый пункт кажется мне странным из-за следующего мысленного эксперимента: что, если мы действительно хотим передать обещание следующей функции в цепочке? Если мы попытаемся сделать это таким наивным образом, обещание лишится обёртки, и мы не получим желаемый результат. Вы можете спросить: зачем вообще передавать обещание в callback?
Ну, может быть, код не знает, какого типа значение он передаёт в функцию. Может быть, значение создаётся где-то ещё в программе, и оно просто должно быть передано. Теперь нужно сперва проверить, если это обещание, и в этом случае обернуть его во что-то ещё для защиты на время передачи. Поэтому я бы предпочёл, чтоб функции обратного вызова всегда должны были возвращать обещание (даже если значение обёрнуто в Promise.resolve(value) ).
Обдумав второй пункт, я пришёл к выводу, что функции обратного вызова должны быть отложенными. И вот почему: допустим, обещание не выполнено. Оно должно быть передано следующему в цепочке обработчику ошибок, или же сгенерировать исключение при отсутствии оного. Но ему сперва придётся дождаться, пока обработчики ошибок будут прикреплены. И как долго ждать?
Очевидно: до следующей итерации цикла событий.
Несмотря на эти странности, promises — приятное дополнение к JavaScript. Ад callback’ов был одним из моих самых нелюбимых аспектов JavaScript, но теперь его можно избежать.
P.S. Promise — это монада! Ну или, как минимум, могло бы ею быть, если бы не первый пункт.
Источник: tproger.ru
Promise
При стандартном выполнении JavaScript инструкции выполняются последовательно, одна за другой. То есть сначала выполняется первая инструкция, потом вторая и так далее. Однако что, если одна из этих операций выполняется продолжительное время.
Например, она выполняет какую-то высоконагруженную работу, как обращение по сети или обращение к базе данных, что может занять неопределенное и иногда продолжительное время. В итоге при последовательном выполнении все последующие операции будут ожидать выполнения этой операции. Чтобы избежать подобной ситуации JavaScript предоставляет ряд инструментов, которые позволяют избежать подобного сценария, чтобы последующие операции могли выполняться, пока выполняется продолжительная операция. Одним из таким инструментов являются промисы (promise).
Промис (promise) — это объект, представляющий результат успешного или неудачного завершения асинхронной операции. Асинхронная операция, упрощенно говоря, это некоторое действие, выполняется независимо от окружающего ее кода, в котором она вызывается, не блокирует выполнение вызываемого кода.
Промис может находиться в одном из следующих состояний:
- pending (состояние ожидания): начальное состояние, промис создан, но выполнение еще не завершено
- fulfilled (успешно завершено): действие, которое представляет промис, успешно завершено
- rejected (завершено с ошибкой): при выполнении действия, которое представляет промис, произошла ошибка
Для создания промиса применяется конструктор типа Promise :
new Promise(executor)
В качестве параметра конструктор принимает функцию, которая выполняется при создании промиса. Обычно эта функция представляет асинхронные операции, которые занимают продолжительное время. Например, определим простейший промис:
const myPromise = new Promise(function()< console.log(«Выполнение асинхронной операции»); >);
Здесь функция просто выводит на консоль сообщение. Соответственно при выполнении этого кода мы увидим на консоли сообщение «Выполнение асинхронной операции» .
При создании промиса, когда его функция еще не начала выполняться, промис переходит в состояние «pending», то есть ожидает выполнения.
Как правило, функция, которая передается в конструктор Promise, принимает два параметра:
const myPromise = new Promise(function(resolve, reject)< console.log(«Выполнение асинхронной операции»); >);
Оба этих параметра — resolve и reject также представляют функции. И каждая из этих функций принимает параметр любого типа.
Первый параметр — функция resolve вызывается в случае успешного выполнения. Мы можем в нее передать значение, которое мы можем получить в результате успешного выполнения.
Второй параметр — функция reject вызывается, если выполнение операции завершилось с ошибкой. Мы можем в нее передать значение, которое представит некоторую информацию об ошибке.
Успешное выполнение промиса
Итак, первый параметр функции в конструкторе Promise — функция resolve выполняется при успешном выполненим. В эту функцию обычно передается значение, которое представляет результат операции при успешном выполнении. Это значение может представлять любой объект. Например, передадим в эту функцию строку:
const myPromise = new Promise(function(resolve)< console.log(«Выполнение асинхронной операции»); resolve(«Привет мир!»); >);
Функция resolve() вызывается в конце выполняемой операции после всех действий. При вызове этой функции промис переходит в состояние fulfilled (успешно выполнено).
При этом стоит отметить, что теоретически мы можем возвратить из функции результат, но практического смысла в этом не будет:
const myPromise = new Promise(function(resolve, reject)< console.log(«Выполнение асинхронной операции»); return «Привет мир!»; >);
Данное возвращаемое значение мы не сможем передать во вне. И если действительно надо возвратить какой-то результат, то он передается в функцию resolve() .
Передача информации об ошибке
Второй параметр функции в конструкторе Promise — функция reject вызывается при возникновении ошибки. В эту функцию обычно передается некоторая информация об ошибке, которое может представлять любой объект. Например:
const myPromise = new Promise(function(resolve, reject)< console.log(«Выполнение асинхронной операции»); reject(«Переданы некорректные данные»); >);
При вызове функции reject() промис переходит в состояние rejected (завершилось с ошибкой).
Объединение resolve и reject
Естественно мы можем определить логику, при которой в зависимости от условий будут выполняться обе функции:
const x = 4; const y = 0; const myPromise = new Promise(function(resolve, reject) < if(y === 0) < reject(«Переданы некорректные данные»); >else < const z = x / y; resolve(z); >>);
В данном случае, если значени константы y равно 0, то сообщаем об ошибке, вызывая функцию reject() . Если не равно 0, то выполняем операцию деления и передаем результат в функцию resolve() .
Источник: metanit.com