واجهة برمجة Fetch API

// طلب GET أساسي fetch("https://api.example.com/users") .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error("Error:", error)); // مع async/await (مفضل) async function getUsers() { try { const response = await fetch("https://api.example.com/users"); const data = await response.json(); console.log(data); } catch (error) { console.error("Error:", error); } }

// طلب GET بسيط async function fetchUser(userId) { try { const response = await fetch(`https://api.example.com/users/${userId}`); // تحقق من نجاح الطلب if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const user = await response.json(); return user; } catch (error) { console.error("فشل جلب المستخدم:", error); throw error; } } // طلب GET مع معاملات الاستعلام async function searchUsers(query, page = 1) { const params = new URLSearchParams({ q: query, page: page, limit: 10 }); const response = await fetch(`https://api.example.com/users?${params}`); if (!response.ok) { throw new Error("فشل البحث"); } return await response.json(); } // الاستخدام const results = await searchUsers("john", 1); console.log(results);

async function createUser(userData) { try { const response = await fetch("https://api.example.com/users", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer your-token-here" }, body: JSON.stringify(userData) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const newUser = await response.json(); return newUser; } catch (error) { console.error("فشل إنشاء المستخدم:", error); throw error; } } // الاستخدام const userData = { name: "John Doe", email: "john@example.com", age: 30 }; const newUser = await createUser(userData); console.log("تم إنشاء المستخدم:", newUser);

// PUT - استبدال المورد بالكامل async function updateUser(userId, userData) { const response = await fetch(`https://api.example.com/users/${userId}`, { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(userData) }); if (!response.ok) { throw new Error("فشل التحديث"); } return await response.json(); } // PATCH - تحديث حقول محددة async function updateUserEmail(userId, newEmail) { const response = await fetch(`https://api.example.com/users/${userId}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email: newEmail }) }); if (!response.ok) { throw new Error("فشل تحديث البريد الإلكتروني"); } return await response.json(); } // الاستخدام await updateUserEmail(123, "newemail@example.com");

async function deleteUser(userId) { try { const response = await fetch(`https://api.example.com/users/${userId}`, { method: "DELETE", headers: { "Authorization": "Bearer your-token-here" } }); if (!response.ok) { throw new Error(`فشل حذف المستخدم: ${response.status}`); } // بعض APIs ترجع بدون محتوى (حالة 204) if (response.status === 204) { return { success: true }; } return await response.json(); } catch (error) { console.error("فشل الحذف:", error); throw error; } } // الاستخدام مع التأكيد async function deleteUserWithConfirmation(userId) { if (confirm("هل أنت متأكد من حذف هذا المستخدم؟")) { await deleteUser(userId); console.log("تم حذف المستخدم بنجاح"); } }

async function advancedFetch() { const response = await fetch("https://api.example.com/data", { method: "POST", // الرؤوس headers: { "Content-Type": "application/json", "Authorization": "Bearer token123", "X-Custom-Header": "custom-value" }, // بيانات الجسم body: JSON.stringify({ key: "value" }), // بيانات الاعتماد (الكوكيز) credentials: "include", // "omit", "same-origin", أو "include" // التحكم في التخزين المؤقت cache: "no-cache", // "default", "reload", "no-cache", "force-cache" // معالجة إعادة التوجيه redirect: "follow", // "follow", "error", أو "manual" // المُحيل referrer: "client", // فحص التكامل integrity: "sha256-...", // وضع الطلب mode: "cors" // "cors", "no-cors", "same-origin" }); return await response.json(); }

async function handleDifferentResponses() { // استجابة JSON const jsonResponse = await fetch("/api/users"); const jsonData = await jsonResponse.json(); // استجابة نصية const textResponse = await fetch("/api/message"); const textData = await textResponse.text(); // استجابة Blob (للصور، الملفات) const imageResponse = await fetch("/api/image.jpg"); const imageBlob = await imageResponse.blob(); const imageUrl = URL.createObjectURL(imageBlob); // استجابة FormData const formResponse = await fetch("/api/form"); const formData = await formResponse.formData(); // ArrayBuffer (للبيانات الثنائية) const binaryResponse = await fetch("/api/binary"); const buffer = await binaryResponse.arrayBuffer(); // خصائص الاستجابة console.log("Status:", jsonResponse.status); // 200, 404, إلخ console.log("OK:", jsonResponse.ok); // true إذا 200-299 console.log("Headers:", jsonResponse.headers.get("Content-Type")); console.log("URL:", jsonResponse.url); }

async function robustFetch(url, options = {}) { try { const response = await fetch(url, options); // معالجة أخطاء HTTP if (!response.ok) { // حاول الحصول على تفاصيل الخطأ من الاستجابة let errorMessage = `HTTP error! status: ${response.status}`; try { const errorData = await response.json(); errorMessage = errorData.message || errorMessage; } catch { // جسم الاستجابة ليس JSON } throw new Error(errorMessage); } return await response.json(); } catch (error) { // أخطاء الشبكة، انتهاء المهلة، أو أخطاء مرمية if (error.name === "TypeError") { console.error("خطأ في الشبكة أو مشكلة CORS"); } console.error("خطأ Fetch:", error.message); throw error; } } // مع انتهاء المهلة async function fetchWithTimeout(url, timeout = 5000) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeout); try { const response = await fetch(url, { signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { if (error.name === "AbortError") { throw new Error("انتهت مهلة الطلب"); } throw error; } }

// فئة مساعدة للـ API class UserAPI { constructor(baseUrl) { this.baseUrl = baseUrl; } async request(endpoint, options = {}) { const url = `${this.baseUrl}${endpoint}`; const config = { ...options, headers: { "Content-Type": "application/json", ...options.headers } }; const response = await fetch(url, config); if (!response.ok) { const error = await response.json().catch(() => ({})); throw new Error(error.message || `HTTP error! status: ${response.status}`); } // معالجة 204 No Content if (response.status === 204) { return null; } return await response.json(); } // GET جميع المستخدمين async getAll() { return await this.request("/users"); } // GET مستخدم واحد async getById(id) { return await this.request(`/users/${id}`); } // POST إنشاء مستخدم async create(userData) { return await this.request("/users", { method: "POST", body: JSON.stringify(userData) }); } // PUT تحديث مستخدم async update(id, userData) { return await this.request(`/users/${id}`, { method: "PUT", body: JSON.stringify(userData) }); } // DELETE مستخدم async delete(id) { return await this.request(`/users/${id}`, { method: "DELETE" }); } } // الاستخدام const api = new UserAPI("https://api.example.com"); try { const users = await api.getAll(); const user = await api.getById(1); const newUser = await api.create({ name: "John", email: "john@example.com" }); await api.update(1, { name: "Jane" }); await api.delete(1); } catch (error) { console.error("خطأ API:", error.message); }