أهداف الدرس
- أن تجلب بيانات من واجهة برمجية.
- أن تتعامل مع الخطأ.
- أن تعرض البيانات دون ثغرة XSS.
fetch يعيد وعداً، وawait ينتظره دون أن يجمّد الصفحة.
JavaScript
async function loadNews() {
const res = await fetch('/api/announcements');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const items = await res.json();
const list = document.querySelector('#news');
list.replaceChildren(...items.map(a => {
const li = document.createElement('li');
li.textContent = a.title; // textContent, never innerHTML
return li;
}));
}لا تضع نصاً جاء من مستخدم في innerHTML: سطر خبيث واحد يصبح شيفرة تعمل في متصفح كل زائر.
تمرين
ماذا يحدث لو أعاد الخادم 500؟
الإجابة
res.ok يكون false فنرمي خطأ، والمستدعي يلتقطه بـ try/catch ويعرض رسالة لطيفة.
Lesson goals
- Fetch data from an API.
- Handle the error case.
- Show the data without an XSS hole.
fetch returns a promise, and await waits for it without freezing the page.
JavaScript
async function loadNews() {
const res = await fetch('/api/announcements');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const items = await res.json();
const list = document.querySelector('#news');
list.replaceChildren(...items.map(a => {
const li = document.createElement('li');
li.textContent = a.title; // textContent, never innerHTML
return li;
}));
}Never put user-supplied text into innerHTML: one malicious line becomes code running in every visitor's browser.
Exercise
What happens if the server returns 500?
Answer
res.ok is false, so we throw; the caller catches it with try/catch and shows a friendly message.
التعليقات / Comments
لا تعليقات بعد. كن أول من يسأل. / No comments yet. Be the first to ask.