محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Async Await Keywords</h1>
    <p>Click on the button and wait for 1 second to execute the promise.</p>
    <button onclick="executePromise()">Execute the promise</button>
    <p id="demo"></p>

<script>
		// هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
		async function fetchData() {
			return new Promise((resolve) => {
				// هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثانية
				setTimeout(() => {
					// هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
					const value = Math.floor(Math.random() * 10) + 1;
					// value هنا قمنا بإرجاع قيمة
					resolve(value);
				}, 1000);
			});
		}
		
		// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
		async function executePromise() {
			try {
				// data لتنفيذ البرومس و تخزين نتيجته أياً كانت في المتغير fetchData() هنا قمنا باستدعاء الدالة
				let data = await fetchData();
				// demo يساوي id في المتغير الذي يملك data هنا قمنا بعرض النتيجة المخزنة في المتغير
				document.querySelector('#demo').innerHTML = 'Result = ' + data;
			}
			catch(error) {
				// demo يساوي id  هنا قمنا بعرض الخطأ الذي قد يحدث في العنصر الذي يملك
				document.querySelector('#demo').innerHTML = error;
			}
		}
	</script>
</body>
</html>