Путеводитель по JavaScript Promise для новичков09.12.2016 21:18

Этот материал мы подготовили для JavaScript-программистов, которые только начинают разбираться с «Promise». Обещания (promises) в JavaScript — это новый инструмент для работы с отложенными или асинхронными вычислениями, добавленный в ECMAScript 2015 (6-я версия ECMA-262).

До появления «обещаний» асинхронные задачи можно было решать с помощью функций обратного вызова или с помощью обработки событий. Универсальный подход к решению асинхронных задач — обработка событий. Менее удобный, но также имеющий право на существование, способ использовать функции обратного вызова. Конечно, выбор решения зависит от стоящей перед вами задачи. Вариант решения задач с помощью «обещаний», скорее, призван заменить подход к функциями обратного вызова.

В использовании функций обратного вызова есть существенный недостаток с точки зрения организации кода:»callback hell». Этот недостаток заключается в том, что в функции обратного вызова есть параметр, который, в свою очередь, также является функцией обратного вызова — и так может продолжаться до бесконечности.

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

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

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

/**
 * список изображений
 * (предположим, что изображения 1.jpg, 2.jpg, 3.jpg, 4.jpg существуют, а
 * fake.jpg - нет)
 * 
 * @type {string[]}
 */
var imgList = ["img/1.jpg", "img/2.jpg", "img/fake.jpg", "img/3.jpg", "img/4.jpg"];

/**
 *
 * подгружаем изображение по указанному url
 *
 * @param url
 * @returns {Promise}
 */
function loadImage(url)
{
	//объект "обещание"
	return new Promise(function(resolve, reject)
	{
		var img = new Image();
		img.onload = function()
		{
			//в случае успешной загрузки изображения, результат "обещания" будет url этого изображения
			return resolve(url);
		}
		img.onerror = function()
		{
			//в случае не успешной загрузки изображения, результат "обещания" будет url этого изображения
			return reject(url);
		}
		img.src = url;
	});
}

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

При создании обещание находится в ожидании (состояние pending), а затем может стать выполнено (fulfilled), вернув полученный результат (значение), или отклонено (rejected), вернув причину отказа.

На данный момент может показаться, что «обещание» совершенно не нужно использовать в этой ситуации. Пока мы лишь устанавливаем некий индикатор того, было ли подгружено изображение. Однако вскоре вы увидите, что этот механизм может легко, интуитивно понятно определять, что произойдет после того, как задача будет выполнена (изображение подгружено или нет).

Методы then () и catch ()

function myPromise()
{
	return new Promise(function(resolve, reject)
	{
		//псевдо асинхронный код
		var ascync = true; //или  false
		if (!ascync)
		return reject(new Error("не удалось выполнить..."));

		return return resolve(1);
	});
}

myPromise()
.then(function(res)
{
	console.log(res); //выведет 1
})
.catch(function(err){
	console.log(err.message); //выведет сообщение "не удалось выполнить..."
});

//псевдо асинхронный код
var ascync = true; //или  false
if (!ascync)
{
	reject(new Error("не удалось выполнить..."));
}
else
{
	resolve(1);
}

В методы then () и catch () передают две анонимные функции. Синтаксис метода then () в общем случае такой:

then(function onSuccess(){}, function onFail(){});

myPromise()
.then(function(res)
{
	console.log(res); //выведет 1
})
.catch(function(err){
	console.log(err.message); //выведет сообщение "не удалось выполнить..."
});

myPromise()
.then(function(res)
{
	console.log(res); //выведет 1
},
function(error)
{
	console.log(err.message); //выведет сообщение "не удалось выполнить..."
});

myPromise()
.then(function(res)
{
	console.log(res); //выведет 1
})
.then(undefined, function(error)
{
	console.log(err.message); //выведет сообщение "не удалось выполнить..."
});

Вызовем наш метод loadImage (url) и для примера добавим одну картинку на страницу:

//считаем, что на странице есть элемент с id="images", например, div
loadImage(imgList[0])
.then(function(url)
{
	$('#images').append('');
})
.catch(function(url)
{
	//как и сообщалось выше, не обязательно, чтобы сюда передавался объект типа Error
	//например, вы захотите сохранить в отдельный массив пути к картинкам , которые не подгрузились, и потом что-нибудь с ним сделать...
	console.log("не удалось загрузить изображение по указанному пути: ", url);
});

Последовательная рекурсивная подгрузка и отображение изображений

/**
 * последовательная рекурсивная подгрузка и показ изображений
 * 
 * @param images - массив с url
 */
function displayImages(images)
{
	var imgSrc = images.shift(); // проходим по массиву с изображениями
	if (!imgSrc) return; //если в результате рекурсии прошлись по всему массиву

	//если в массиве еще есть изображение, загружаем его
	return loadImage(imgSrc)
	.then(function(url)
	{
		$('#images').append('');
		return displayImages(images); //рекурсия
	})
	.catch(function(url)
	{
		//если какое-то из изображений не загрузилось, переходим к следующему изображению
		console.log('не удалось загрузить изображение по указанному пути: ', url);
		return displayImages(images); //рекурсия
	});
}

Возможно, такое поведение отображения изображений не совсем то, что необходимо в данном случае. Если требуется показать все изображение только после того, как они были загружены, нужно реализовать работу с массивом «обещаний».

var promiseImgs = [];
promiseImgs = imgList.map(loadImage);

//для наглядности
promiseImgs = imgList.map(function(url){
	return loadImage(url);
});

Для завершения задачи можно было бы воспользоваться методом Promise.all (…).
Promise.all (iterable) возвращает обещание, которое выполнится после выполнения всех обещаний в передаваемом итерируемом аргументе.

Однако у нас в списке есть изображение, которого физически не существует. Поэтому методом Promise.all воспользоваться нельзя: нам необходимо проверять состояние объекта «обещание» (resolved | rejected).

Если в массиве «обещаний» есть хотя бы одно, которое «отклонено» (rejected), то метод Promise.all так же вернет «обещание» с таким состоянием, не дожидаясь прохождения по всему массиву.

Поэтому напишем функцию loadAndDisplayImages.

Подгружаем изображения, и показываем их на странице все сразу

/**
 *
 * @param imgList - массив url
 * @returns {Promise}
 */
function loadAndDisplayImages(imgList)
{
	var notLoaded = [];//сохраним url, какие были загружены
	var loaded = [];//сохраним url, какие не были загружены
	var promiseImgs = imgList.map(loadImage);

	//вернем результат работы вызова reduce(...) - объект Promise, чтобы можно было потом  при необходимости продолжить цепочку вызовов:
	//loadAndDisplayImages(...).then(...).catch(...);
	return promiseImgs.reduce(function (previousPromise, currentPromise)
	{
		return previousPromise
			.then(function()
			{
				//выполняется этот участок кода, так как previousPromise - в состоянии resolved (= Promise.resolve())
				return currentPromise;
			})
			.then(function(url) //для "обещаний" в состоянии resolved
			{
				$('#images').append('');
				loaded.push(url);
				return Promise.resolve(url);
			})
			.catch(function(url)//для "обещаний" в состоянии rejected
			{
				console.log('не удалось загрузить изображение по указанному пути: ', url);
				notLoaded.push(url);
				return Promise.resolve(url);
			});

	}, Promise.resolve())
		.then(function (lastUrl)
		{
			console.log('lastUrl:', lastUrl);

			let res = {loaded: loaded, notLoaded: notLoaded};

			//но мы вернем Promise, значение которого будет объект
			return Promise.resolve(res);
		});

}

loadAndDisplayImages(imgList)
.then(function(loadRes)
{
	console.log(loadRes);
})
.catch(function(err)
{
	console.log(err);
});

Можно посмотреть сетевую активность в браузере и убедиться в параллельной работе (для наглядности в Chrome была включена эмуляция подключения по Wi-Fi (2ms, 30Mb/s, 15M/s):

Разобравшись, как работать с Promise, вам будет проще понять принципы работы, например, с API Яндекс.Карт, или Service Worker — именно там они используются.

Комментарии (1)

• svboobnov

  9 декабря 2016 в 20:23

  –1

  ↑

  ↓

  Спасибо за краткое, но довольно ёмкое введение.
  Я с JavaScript сталкивался в 2004 году, потому мне полезно =)