جلب البيانات بـ Fetch
تطلب fetch(url) من المتصفح إرسال طلب HTTP. وتعيد فوراً Promise يتحقق عادةً إلى Response، لا إلى JSON محلّل.
Response أولاً ثم البيانات
يعطي await fetch(...) الحالة والرؤوس ومجرى الجسم. تقرأ response.json() نص الجسم وتحلّله كـ JSON، ثم تعيد Promise آخر قيمته بيانات JavaScript.
مرحلتان منفصلتان
افصل بين نقل الاستجابة وتحليل الجسم. قد تكون للحالة قيمة مهمة حتى إن لم يكن الجسم JSON.
📊 من الطلب إلى البيانات
| التعبير | النتيجة | المعنى |
|---|---|---|
| fetch(url) | Promise<Response> | بدأ الطلب |
| await fetch(url) | Response | status والرؤوس ومجرى الجسم |
| response.json() | Promise<any> | قراءة الجسم وتحليله |
| await response.json() | بيانات JavaScript | الكائن أو القيمة المحللة |
fetch تعيد Promise
يستخدم المثال Blob URL ليعمل مستقلاً ويعرض نوع القيمة فقط. هذا مورد في ذاكرة المتصفح وليس endpoint HTTP من الأصل نفسه.
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
الناتج true. في التطبيق الحقيقي استبدل Blob URL بمسار HTTP مثل /data/drink.json.
انتظر Response ثم JSON
ينشئ المثال التالي المورد المحلي نفسه وينتظر المرحلتين.
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
الناتج lida tea. يمكن أن يحتوي الملف الحقيقي /data/drink.json على {"drink":"lida tea"} وتبقى خطوات القراءة نفسها.
افحص أخطاء HTTP صراحةً
غالباً لا ترفض fetch Promise عند status يساوي 404 أو 500. قد يفشل الاتصال، لكن status غير الناجح وحده لا يكفي. افحص response.ok أو response.status.
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
تطبع الاستجابة المنشأة false ثم 404، وهما الخاصيتان اللتان تفحصهما بعد fetch حقيقية. لا تحلل صفحة خطأ كـ JSON إلا إذا ضمن الـ API ذلك.
json تعيد Promise أخرى
تبدأ json() قراءة الجسم وتحليله بصورة غير متزامنة.
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
الناتج true. بعد await response.json() يصبح data كائن JavaScript وتكون data.drink هي السلسلة.
مثال صفحة بلا endpoint
يجلب المثال Blob URL كي يعمل وحده. يوضح المسار وstatus يساوي 200، لكنه ليس طلباً إلى خادم.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
تعرض الصفحة 200 / lida tea. في الإنتاج استخدم URL من نوع HTTP واحتفظ بفحص ok قبل التحليل.
جرّب بنفسك
أنشئ /data/drink.json على خادم محلي واستبدل Blob URL. ثم اطلب مساراً مفقوداً وقارن ok وstatus.
أخطاء شائعة
لا تعامل Promise التي تعيدها fetch كبيانات. لا تنس استدعاء json() وانتظارها. ولا تعتمد على catch لاكتشاف كل 404.
الخلاصة
ترسل fetch طلباً وتعطي Promise لـ Response. افحص ok ثم حلّل الجسم المتوقع. وتعيد response.json() Promise لبيانات JavaScript.
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى