jQuery метод deferred.promise()

Определение и применение

jQuery метод deferred.promise() возвращает копию объекта Deffered (объект Promise), который имеет аналогичный набор методов, за исключением методов изменения состояния объекта.

Метод deferred.promise() позволяет асинхронной функции предотвратить вмешательство другого кода в ход выполнения, или изменения состояния ее внутреннего запроса. Объект Promise предоставляет только те методы объекта Deffered, которые необходимы для подключения дополнительных обработчиков, или определения состояния выполнения объекта (методы .then(), .done(), .fail(), .always(), .progress(), .state() и .promise()).

Обращаю Ваше внимание, что объект Promise не предоставляет те методы, которые позволяют изменить состояние объекта (.resolve(), .reject(), .notify(), .resolveWith(), .rejectWith() и .notifyWith()).

jQuery синтаксис:

Синтаксис 1.5:
// возвращает новый объект
deferred.promise()

// добавление методов к уже существующему объекту
deferred.promise( target )

target - Object

Добавлен в версии jQuery

1.5

Значения параметров

Параметр	Описание
target	Целевой объект для которого необходимо прикрепить методы объекта Deffered, а не возвращать новый объект. Это может быть полезно для присоединения поведения Promise к уже существующему объекту.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .promise()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  function asyncEvent() {
	    let dfd = $.Deferred(); // создаем объект Deferred
 
	    // изменяем статус объекта на "resolved" после случайного интервала
	    setTimeout(function() {
	      dfd.resolve( "resolved" );
	    },Math.floor( Math.random() * 1000 ) );
 
	    // изменяем статус объекта на "rejected" после случайного интервала
	    setTimeout(function() {
	      dfd.reject( "rejected" );
	    }, Math.floor( Math.random() * 1000 ) );
 
	    // возвращаем Promise
	    return dfd.promise();
	  }
		  
	  $( "button" ).click(function() { // задаем функцию при нажатиии на элемент <button>
	    $.when( asyncEvent() ).then(
	      function( status ) { // присоединяем обработчик для успешного выполнения
	        console.log( status );
	      },
	      function( status ) { // присоединяем обработчик для случая когда выполнение отклонено
	        console.error( status );
	      });
	  });
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
	</body>
</html>

В этом примере мы создали функцию, которая инициализирует переменную, содержащую объект Deffered, созданный с помощью фабричной функции $.Deferred(). С помощью метода deferred.promise() возвращаем копию объекта Deffered (объект Promise), который имеет аналогичный набор методов, за исключением методов изменения состояния объекта. Кроме того, при запуске функции срабатывают два счетчика, которые изменяют статус объекта на "rejected" (выполнение отклонено) после случайного интервала, или на "resolved" (успешное выполнение). Обратите внимание, что только у счетчика, который первый сработает получиться изменить состояние объекта.

При нажатии на элемент <button>, благодаря установленному обработчику событий "click" на элементе мы с помощью метода $.when() ожидаем изменения состояния объекта Promise на который мы с помощью метода deferred.then() присоединили обработчики состояния для случая когда выполнение отклонено ("rejected"), и когда выполнение успешно ("resolved"). Обратите внимание, что состояние объекта Promise мы не можем изменить напрямую, а делаем это через первоначальный объект Deffered на котором был вызван метод deferred.promise(). Информация о изменении состояния объекта после каждого нажатия на кнопку (элемент <button>) выводится в консоль браузера.

Результат нашего примера:

Пример использования jQuery метода .promise().

В следующем примере мы рассмотрим использование метода deferred.promise() с дополнительным параметром:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .promise() с параметром</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function() {
	  // инициализируем переменную, содержащую объект
	  let obj = {
	    greet: function( name ) {
	      $( "p" ).html( "Hello " + name );
	    }
	  };
		
	  // создаем объект Deferred
	  let dfd = $.Deferred(); 
 
	  // устанавливаем объект obj как объект Promise
	  dfd.promise( obj );
 
	  // присоединяем обработчик при изменении состояния объекта Deffered на "resolved"
	  obj.done( ( name ) => obj.greet( name ) );
		  
	  $( "button" ).click(function() { // задаем функцию при нажатиии на элемент <button>
	    dfd.resolve( prompt( "Введите Ваше имя" ) );
	  });
	});
		</script>
	</head>
	<body>
		<button>Resolve</button>
		<p></p>
	</body>
</html>

В этом примере мы инициализировали переменные, содержащие объект Deffered, созданный с помощью фабричной функции $.Deferred() и объект, содержащий метод, который принимает один аргумент и с помощью метода .html() задает содержимое выбранного элемента <p>.

С помощью метода deferred.promise() мы прикрепляем указанному объекту методы объекта Deffered и возвращаем ограниченную копию этого объекта (объект Promise). Для этого объекта мы присоединяем обработчик, который сработает при изменении состояния объекта Deffered на "resolved" (успешное выполнение) и вызовет метод объекта obj.

При нажатии на элемент <button>, благодаря установленному обработчику событий "click" на элементе мы с помощью метода .resolve() изменяем состояние объекта Deffered на resolved (успешное выполнение) и вызываем любые, предназначенные для подобных ситуаций функции обратного вызова (doneCallbacks) с заданными аргументами. Обратите внимание, что метод .resolve() в качестве параметра принимает результат вызова метода window.prompt(), который позволяет ввести произвольную текстовую информацию.

Результат нашего примера:

Пример использования jQuery метода .promise() с параметром.

jQuery объект Deferred