جافاسكربتFetch API
- ما هو Fetch API
- كيفية استخدام Fetch API
- تحديد طريقة إرسال الطلب في Fetch API
- تحديد نوع الطلب أو الرد في Fetch API
- أساليب عرض نتائج طلبات Fetch API
- معالجة الأخطاء في Fetch API
- أمثلة شاملة على استخدام Fetch API
ما هو Fetch API
Fetch API هو أحدث آلية تم إضافتها في جافاسكربت لجعل صفحات الويب قادرة على إرسال طلبات المستخدم ( User Requests ) و استقبال ردود السيرفر ( Server Responses ) بشكل متزامن و بدون الحاجة إلى تحديث الصفحة أو الإنتقال لصفحة جديدة.
إرسال الطلبات بشكل متزامن إلى السيرفر تحتاجه في حالات كثيرة نذكر منها:
- لجعل المستخدم قادر على إضافة تعليق جديد.
- لجعل المستخدم قادر على جلب التعليقات و عرضها له.
- لجعل المستخدم قادر على تقييم محتوى الصفحة.
- لجعل المستخدم قادر على رفع صورة و ضبط حجمها إلخ..
في هذا الدرس ستتعلم كيفية إرسال طلبات متزامنة إلى السيرفر عن طريق Fetch API خطوة خطوة.
قبل وجود Fetch API كانت طريقة إرسال و استقبال البيانات بشكل متزامن تتم من خلال استخدام آلية XMLHttpRequest و التي كان استخدامها أصعب و غالباً ما كان مطوروا الويب يلجؤوا الى استخدام مكتبة JQuery التي كانت تجعل هذا الأمر سهل للغاية.
كيفية استخدام Fetch API
بدايةً، عليك معرفة أن Fetch API مبني بأسلوب البرومس ( Promise ) مما يعني أنه عند إرسال الطلبات بواسطته فإنه يتم إرسالها بشكل متزامن و النتيجة التي ترجع قد تكون نتيجة صحيحة و قد تكون نتيجة مرفوضة بالإضافة إلى أنه قد يحدث مشكلة أثناء التنفيذ.
التعامل مع Fetch API يتم من خلال الدالة fetch() المبنية على النحو التالي.
- مكان البارميتر resource نمرر المصدر أو الرابط الذي سيتم إرسال الطلب إليه.
- options هو باراميتر إختياري - على حسب نوع الطلب - و مكانه يمكن تمرير كائن فيه معلومات مرتبطة بالطلب.
بما أن الدالة fetch() عبارة عن برومس فإنه يجب استدعاء الدالة then() منها أو وضع الكلمة await قبلها حتى تتنفذ.
سنشرح كلا الأسلوبين و لكننا سنركز على أسلوب async / await لأنه أكثر سهولة في التعامل.
كمثال بسيط، هكذا يكون شكل الطلب الذي يعطينا الصفحة الرئيسية في موقع هرمش.
المثال الأول
تحديد طريقة إرسال الطلب في Fetch API
كل طلب يتم إرساله إلى السيرفر يتم إرساله بطريقة محددة ( method
) من الطرق المذكورة في الجدول التالي.
الطريقة | إستعمالها |
---|---|
GET |
هذه الطريقة الإفتراضية في إرسال الطلبات و هي تستعمل لإرسال طلب عام، مثل طلب إحضار صفحة من الموقع. |
POST |
هذا الطريقة تستعمل لإرسال طلب خاص، مثل طلب تسجيل دخول في الموقع. |
PUT |
هذا الطريقة تستعمل لإرسال طلب لتعديل كلي، مثل طلب تعديل كل معلومات المستخدم. |
PATCH |
هذا الطريقة تستعمل لإرسال طلب تعديل جزئي، مثل طلب تعديل بعض معلومات المستخدم. |
DELETE |
هذا الطريقة تستعمل لإرسال طلب للحذف، مثل طلب لحذف مستخدم. |
على الرغم من أن طرق إرسال الطلبات تحدد ما يقوم به الطلب بدقة إلا أنه عادةً ما يستعمل المطورون الطريقة GET
و POST
فقط.
فعلياً، هكذا يكون شكل الطلب الذي يعطينا الصفحة الرئيسية في موقع هرمش.
المثال الأول
و هكذا يكون شكل الطلب الذي يسمح لنا بحذف مقال من موقع هرمش.
المثال الثاني
تحديد نوع الطلب أو الرد في Fetch API
الطلبات التي يتم إرسالها للسيرفر أو الردود التي تأتي منه يجب أن يتم تحديد أنواعها ( Content-type
) بشكل صحيح حتى يتم نقلها بشكل صحيح.
الجدول التالي يتضمن أنواع الطلبات و الردود التي يجب معرفتها.
نوع الرد | معناه |
---|---|
text/plain |
هذا هو نوع الرد الإفتراضي و معناه أن الرد سيتم إستلامه على شكل نص عادي. |
text/html |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل نص و لكنه بلغة HTML. |
text/css |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل نص و لكنه بلغة CSS. |
text/xml |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل نص و لكنه بلغة XML. |
text/csv |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل نص و لكنه بلغة CSV. |
text/javascript |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل نص و لكنه بلغة JavaScript. |
application/json |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل نص و لكنه بأسلوب JSON. |
image/png |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل صورة نوعها PNG. |
image/apng |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل صورة نوعها APNG. |
image/gif |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل صورة نوعها GIF. |
image/jpeg |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل صورة نوعها JPEG. |
image/svg+xml |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل صورة نوعها SVG. |
image/webp |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل صورة نوعها WEBP. |
application/octet-stream |
هذا النوع من الرد معناه أن الرد سيتم إستلامه على شكل Binary و هذا النوع لا يمكن عرضه في الصفحة، مما يجعل المستخدم قادر على حفظ هذا الرد كملف على جهازه. |
multipart/form-data |
هذا النوع يستعمل عند إرسال بيانات النموذج و التي قد تتضمن ملف أو صورة مرفقة معها. |
كمثال بسيط، هكذا يكون شكل الطلب الذي يسمح لنا بتسجيل الدخول في موقع هرمش.
لاحظ أن الطريقة التي استخدمناه في إرسال الطلب للسرفر هي POST
و سيتم ترتيب البيانات في الطلب بأسلوب JSON
مثال
أساليب عرض نتائج طلبات Fetch API
في المثال التالي قمنا بجلب ملف نصي إسمه demo.txt
موجود في هرمش، و من ثم قمنا بتحويل محتواه لنص عادي بواسطة الدالة text() و في النهاية قمنا بعرضه في الصفحة على أنه محتوى HTML.
مثال
المثال السابق نفسه يمكن كتابته بأسلوب async / await على النحو التالي.
مثال
معالجة الأخطاء في Fetch API
عند طلب بيانات من أي سيرفر فإنه قد يعرض لك نتيجة مرفوضة ( Rejected ) أو قد يحدث خطأ ( Error ) ما أثناء تنفيذ الطلب.
نتيجة الطلب تعتبر مقبولة ( Resolved ) إذا كانت حالة التنفيذ المرفقة في رد السيرفر هي 200
أو ببساطة هي ok
.
غير ذلك تعتبر فإن نتيجة تعتبر غير مقبولة و هنا فإننا في الواقع نظهرها كخطأ للمستخدم.
إذاً بناءاُ على رد السيرفر يمكنك معرفة ما إن كانت القيمة مقبولة أم لا.
في الأمثلة التالية، مسار الملف الذي سنحاول جلبه كتبناه بشكل خاطئ عمداً حتى نتسبب بخطأ.
عند تجربة الأمثلة فإنه عليك الإنتظار لبضعة ثواني ريثما يظهر لك أنه يوجد خطأ.
إذا كنت تستخدم الدالة then() فيمكنك إضافة الدالة catch() في النهاية لمعالجة أي خطأ يحدث.
مثال
إذا كنت تستخدم async / await فيمكنك وضع الكود بداخل بلوك try / catch لمعالجة أي خطأ قد يحدث أثناء تنفيذ الكود.
مثال
أمثلة شاملة على استخدام Fetch API
سنطبق جميع الأمثلة التالية على API وهمي مجاني تابع لموقع typicode.com.
في المثال التالي قمنا بطلب مقال واحد من الموقع و من ثم قمنا بعرض محتواه في الصفحة.
المثال الأول
قمنا بكتابة response.json() لأجل إرجاع الكائن الذي وصلنا عند تنفيذ الطلب على هيئة JSON إلى كائن جافاسكربت.
في المثال التالي قمنا بطلب جميع المقالات من الموقع و من ثم قمنا بعرض محتواه في الصفحة.
ملاحظة: سيتم إحضار مئة مقال، سنعرض من كل مقال عنوانه و الفقرة الموجودة فيه.
المثال الثاني
في المثال التالي قمنا بإرسال طلب لإنشاء مقال جديد في الموقع.
المتعارف عليه إذا تم إنشاء المقال بنجاح، هو أن يقوم السيرفر بإرجاع نسخة منه.
ملاحظة: قمنا إرسال بيانات المقال على شكل JSON للسيرفر.
المثال الثالث
في المثال التالي قمنا بحذف مقال واحد من الموقع و من بعدها قمنا بإظهار رسالة تفيد بأنه تم حذفه.