Modern JS Cheatsheet / Памятка по современному JavaScript: Промисы

Сбросить всё

Английский оригинал	Перевод на русский
Сожалеем, но текст оригинала доступен только зарегистрированным пользователям.	### Промисы wizjer 11.10.17 в 07:48 0	+2
	Промис (promise) - это объект, который может быть синхронно возвращён из асинхронной функции ([ccskrf](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261#3cd0)). a_popova 04.10.17 в 15:21 0 Промис (promise) — это объект, который может быть синхронно возвращён из асинхронной функции ([ccskrf](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261#3cd0)). wizjer 11.10.17 в 07:52 1
	Промисы могут использоваться, чтобы избежать [callback hell](http://callbackhell.com/),и они всё чаще и чаще встречаются в современных JavaScript проектах. a_popova 04.10.17 в 15:21 0 Промисы могут использоваться, чтобы избежать [глубоко вложенных колбэков](http://callbackhell.com/), и они всё чаще и чаще встречаются в современных JavaScript проектах. wizjer 11.10.17 в 07:52 2	+3
	#### Пример кода a_popova 04.10.17 в 15:22 0
	```js const fetchingPosts = new Promise((res, rej) => { $.get("/posts") .done(posts => res(posts)) .fail(err => rej(err)); }); fetchingPosts .then(posts => console.log(posts)) .catch(err => console.log(err)); ``` a_popova 04.10.17 в 15:22 0
	#### Пояснение a_popova 04.10.17 в 15:22 0
	Когда вы делаете Ajax-запрос, ответ не является синхронным, т.к. вы запрашиваете ресурс, на обработку которого требуется некоторое время. Вы также можете вообще не получить ответ, если он недоступен по какой-то причине (404). a_popova 04.10.17 в 15:23 0 Когда вы делаете AJAX-запрос, ответ будет несинхронным, т.к. вы запрашиваете ресурс, на обработку которого требуется некоторое время. Вы также можете вообще не получить ответ, если он недоступен по какой-то причине (404). wizjer 11.10.17 в 08:01 1
	Чтобы избежать таких ситуаций, в ES2015 были добавлены промисы. Промисы могут иметь 3 различных состояния: a_popova 04.10.17 в 15:23 0 Чтобы избежать таких ситуаций, в ES2015 были добавлены промисы. Промисы могут иметь 3 различных состояния: wizjer 11.10.17 в 07:57 1
	- Выполняется - Выполнено - Отклонено a_popova 04.10.17 в 15:24 0
	Предположим, мы хотим использовать промисы для обработки Ajax-запроса для извлечения ресурса X. a_popova 04.10.17 в 15:24 0 Предположим, мы хотим использовать промисы для обработки AJAX-запроса для извлечения ресурса X. wizjer 11.10.17 в 07:58 0
	##### Создание промиса a_popova 04.10.17 в 15:25 0 ##### Создание промиса wizjer 11.10.17 в 07:58 0
	Сначала нам нужно создать промис. Мы будем использовать get-метод jQuery для создания Ajax-запроса к X. a_popova 04.10.17 в 15:25 0 Сначала нам нужно создать промис. Мы будем использовать GET-метод jQuery для создания AJAX-запроса к X. wizjer 11.10.17 в 08:00 0
	```js const xFetcherPromise = new Promise( // Создаём промис с помощью ключевого слова "new" и сохраняем его в переменную function(resolve, reject) { // Конструктор Promise принимает в виде параметра функцию, которая, в свою очередь, принимает 2 параметра: resolve и reject $.get("X") // Запускаем Ajax-запрос .done(function(X) { // Как только запрос выполнен... resolve(X); // ... выполняем промис с X в качестве значения }) .fail(function(error) { // Если запрос не прошёл... reject(error); // ... отклоняем промис со значением error }); } ) ``` a_popova 04.10.17 в 15:26 0 ```js const xFetcherPromise = new Promise( // Создаём промис с помощью ключевого слова "new" и сохраняем его в переменную function(resolve, reject) { // Конструктор Promise принимает в виде параметра функцию, которая, в свою очередь, принимает 2 параметра: resolve и reject $.get("X") // Запускаем AJAX-запрос .done(function(X) { // Как только запрос выполнен... resolve(X); // ... выполняем промис с X в качестве значения }) .fail(function(error) { // Если запрос не прошёл... reject(error); // ... отклоняем промис со значением error }); } ) ``` wizjer 11.10.17 в 08:03 0
	Как видно из предыдущего примера, объект Promise принимает функцию, которая принимает два параметра: resolve и reject. Эти параметры - функции, которые при вызове изменяют состояние промиса со значения выполняется на выполнено или отклонено. a_popova 04.10.17 в 15:28 0 Как видно из рассмотренного примера, объект Promise принимает функцию, которая принимает два параметра: resolve и reject. Эти параметры - функции, которые при вызове изменяют состояние промиса со значения выполняется на выполнено или отклонено. wizjer 11.10.17 в 08:04 0	+2
	Промис находится в состоянии выполнения после создания экземпляра, и его функция-исполнитель выполняется немедленно. Как только одна из функций выполнения или отклонения вызвана в функции-исполнителе, промис вызовет связанные с ним обработчики. a_popova 04.10.17 в 15:31 0 Промис находится в состоянии выполнения после создания экземпляра, и его функция-исполнитель выполняется немедленно. Как только одна из функций выполнения или отклонения вызвана в функции-исполнителе, промис вызовет связанные с ним обработчики. wizjer 11.10.17 в 08:04 0
	##### Использование обработчиков промисов a_popova 04.10.17 в 15:31 0 ##### Использование обработчиков промисов wizjer 11.10.17 в 08:05 0
	Чтобы получить результат (или ошибку) промиса, мы должны присоединиться к его обработчикам следующим образом: a_popova 04.10.17 в 15:32 0 Чтобы получить результат (или ошибку) промиса, мы должны присоединить к нему обработчики следующим образом: wizjer 11.10.17 в 08:05 0
	```js xFetcherPromise .then(function(X) { console.log(X); }) .catch(function(err) { console.log(err) }) ``` a_popova 04.10.17 в 15:32 0
	Если вызов прошёл успешно, вызывается resolve, и выполняется функция, переданная в метод ```.then```. a_popova 04.10.17 в 15:33 0
	Если вызов не прошёл, вызывается rejectи выполняется функция, переданная в ```.catch```. a_popova 04.10.17 в 15:34 0
	> Примечание : Если промис уже был выполнен или отклонен, когда вызывается соответствующий обработчик, обработчик всё равно будет вызван, так что нет никакой гонки между выполнением асинхронной операции и вызовом ее обработчиков. [(Ссылка: MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Description) a_popova 04.10.17 в 15:35 0 > Примечание : Если обработчик присоединяется, когда когда промис уже был выполнен или отклонён, обработчик всё равно будет вызван. Так что нет никакой гонки между выполнением асинхронной операции и вызовом ее обработчиков. [(Ссылка: MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Description) wizjer 11.10.17 в 08:08 0
	#### Дополнительные материалы a_popova 04.10.17 в 15:35 0
	- [Промисы в JavaScript для чайников - Jecelyn Yeen](https://scotch.io/tutorials/javascript-promises-for-dummies) - [API для промиса в JavaScript - David Walsh](https://davidwalsh.name/promises) - [Использование промисов - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) - [Что такое промис - Eric Elliott](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261) - [Промисы в JavaScript: Введение - Jake Archibald](https://developers.google.com/web/fundamentals/getting-started/primers/promises) - [Документация по промисам - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) a_popova 04.10.17 в 15:37 0