async & await

Ключові слова async і await використовуються для створення асинхронних функцій.

Асинхронні функції дозволяють писати код так наче функція є синхронна але без блокування потоку виконання.

Асинхронні функції використовують Promise.

async і await були додані в специфікації ES8.

Для оголошення асинхронної функції використовується async:

async function myAsyncFunc(){
	/*код асинхронної функції*/
}

Приклад використання промісу без async і await:

function testPromise(){
	return new Promise(function(result){
		var res=0;
		for(var i=0;i<1000000;i++)
		res+=Math.random();
		result(res);
	});
}

function test(){
	var r = testPromise();
	r.then(function(a){alert('результат промісу: '+a)});
}

test();

Приклад використання промісу з async і await:

function testPromise(){
	return new Promise(function(result){
		var res=0;
		for(var i=0;i<1000000;i++)
		res+=Math.random();
		result(res);
	});
}

async function test(){
	var r = await testPromise();
	alert('результат промісу: '+r);
}

test();

В асинхронних функція для обробки помилок в Promise можна використовувати try...catch.

Приклад:

async function funAsync(){
	var promise = new Promise(function(res, rej){
		setTimeout(function(){res("Тест async");}, 1500);
	});

	var result = await promise; 
	alert(result); 
}


funAsync();

Використання async і await для fetch()

async function GET(url){
	try{
		var res = await fetch(url);
		var txt= await res.text();
		alert(txt);
	}
	catch(er){
		alert('Error GET\n'+er);
	}
}

GET('/ajax.php');

Зверніть увагу що навіть якщо ми повертаємо з асинхронної функції текст для його отримання необхідно викликати Promise.then() так як асинхронна функція завжди повертає Promise

async function GET(url){
	try{
		var res = await fetch(url);
		var txt= await res.text();
		return txt;
	}
	catch(er){
		return 'Error GET\n'+er;
	}
}

GET('/ajax.php').then(function(res){alert(res);});

Асинхрона функція яка завантажує зображення за вказаним масивом URL адрес та повертає проміс з результатом масив зображень.

function loadImg(url){ //функція завантаження зображення яка повертає проміс
	return new Promise(function(resolve, reject){
		var img=document.createElement('img');
		img.onload=function(){resolve(img)};
		img.onerror=function(er){reject(er)};
		img.src=url;
	});
}

async function lo(){ //асинхронна функція
	var res=[];
	var img1 = await loadImg('/dani/test.jpg');
	var img2 = await loadImg('/dani/test.png');
	var img3 = await loadImg('/_images/js.png');
	return [img1, img2, img3];
}

lo().then(function(res){ alert(res); });