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

<!DOCTYPE html>
<html>
<body>
	<script>
		// هنا قمنا بتعريف دالة تقوم بإرسال طلب إلى السيرفر بشكل متزامن و من ثم تعرض نتيجته
		async function fetchData() {
            // وضعنا فيه مسار الموقع الذي سنقوم بإرسال الطلب إليه url المتغير
            let url = 'https://jsonplaceholder.typicode.com/posts/1';

try {
                // url هنا قمنا بإرسال طلب إلى الرابط الموجود في
                let response = await fetch(url);

// هنا قمنا بفحص الرد الذي أتى من السيرفر لمعرفة ما إن كان قد تم العثور على المقال بنجاح أم لا
				if (!response.ok) {
					// إذا كان رد السيرفر يفيد بأن قد فشل في جلبه فسيتم
					// عرض النص التالي للإشارة إلى وقوع خطأ عند التنفيذ
					throw new Error('Network response was not ok');
				}

// إلى كائن جافاسكربت JSON إذا كان الرد مقبولاً فسيتم تحويله من صيغة
                let data = await response.json();

// بعد أن تم تحويل الرد إلى كائن، سيتم عرض القيم الموجودة فيه
                document.write(`
                    <p>Fetched data:</p>
                    <ul>
                        <li>userId: ${data.userId}</li>
                        <li>id: ${data.id}</li>
                        <li>title: ${data.title}</li>
                        <li>body: ${data.body}</li>
                    </ul>`);
            }
            catch(error) {
                // إذا حصل أي خطأ أثناء جلب البيانات سيتم عرضه
                alert(error);
            }
		}

// حتى تتنفذ fetchData() هنا قمنا باستدعاء الدالة
		fetchData();
	</script>
</body>
</html>