اختر لونك:
وَقُلِ اعْمَلُوا فَسَيَرَى اللَّهُ عَمَلَكُمْ وَرَسُولُهُ وَالْمُؤْمِنُونَ ۖ وَسَتُرَدُّونَ إِلَىٰ عَالِمِ الْغَيْبِ وَالشَّهَادَةِ فَيُنَبِّئُكُم بِمَا كُنتُمْ تَعْمَلُونَ [ التوبة : ( 105 )] كلمة الإدارة

يرجى إختيار القسم المناسب قبل النشر وسيعاقب المخالف بإنذار أول مرة وسيتم حظره إذا تكرر ذلك كلمة الإدارة

يُمنع كتابة مواضيع السحر والشعوذة والروحانيات والابراج بكافة الأشكال والمخالف سيعاقب بحظر مؤقت وإذا تكرر سيكون حظر دائم تنبيه هام جداً



أضف رد جديد

قديم 03-04-2019, 11:17 PM   #1
تاريخ التسجيل: Feb 2019
العمر: 37
المشاركات: 1,149
التقييم: 10
تاريخ التسجيل: Feb 2019
العمر: 37
المشاركات: 1,149
التقييم: 10
افتراضي ما معني JavaScript Fetch API ؟

تعتبر Fetch API من الواجهات الجديدة في الجافاسكريبت والتي جاءت ربما لتحل محل الواجهة القديمة XMLHttpRequest.
Fetch API جاءت بنفس فكرة XHR إلا أن هناك بعض الفروق الأساسية بينهما لعل أبرزها اعتماد Fetch API على الوعود Promises في عرض النتائج عوض دوال الرد Callbacks التي اعتمد عليها دائما XMLHttpRequest.
XMLHttpRequest

// Just getting XHR is a mess! if (window.XMLHttpRequest) { // Mozilla, Safari, ... request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } // Open, send. request.open('GET', 'http://tutomena.com/ajax-endpoint', true); request.send(null);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// Just getting XHR is a mess!
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}

// Open, send.
request.open('GET', 'http://tutomena.com/ajax-endpoint', true);
request.send(null);



هذا مجرد استعمال بسيط لواجهة XHR وهي نوعا ما معقدة للوهلة الأولى خاصة فيما يتعلق بالتوافقية مع مختلف المتصفحات ولو أن هناك العديد من المكتبات (جيكويري مثلا…) جعلت من أمر استعمالها يسيرا وسهلا ولكن في المشاريع الكبرى تظل هناك بعض الإشكاليات خاصة مع دوال الرد Callbacks على مستوى تنظيم الكود وجماليته.استعمال واجهة Fetch API

// Simple response handling fetch('/some/url').then(function(response) { }).catch(function(err) { // Error :( });
1
2
3
4
5
6

// Simple response handling
fetch('/some/url').then(function(response) {

}).catch(function(err) {
// Error :(
});



كما تلاحظون استعمال واجهة Fetch API هو أسهل وأجمل، خاصة مع استعمال دوال الوعود Promises API.
في داخل دالة then الأولى نضع الكود والشيفرة في حال نجاح عملية الإستدعاء، بينما دالة catch الثانية تستدعى عندما يكون هناك خطأ أثناء العملية.
إمكانية تسلسل الوعود Chaining Promises

function status(response) { if (response.status >= 200 && response.status < 300) { return Promise.resolve(response) } else { return Promise.reject(new Error(response.statusText)) } } function json(response) { return response.json() } fetch('users.json') .then(status) .then(json) .then(function(data) { console.log('Request succeeded with JSON response', data); }).catch(function(error) { console.log('Request failed', error); });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}

function json(response) {
return response.json()
}

fetch('users.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});



نلاحظ في هذا المثال أننا استعمالنا دالة then عدة مرات وهذا من ميزات واجهة الوعود في الجافاسكريبت Promises API.
دالة then الأولى تقوم بجلب البيانات من ملف users.json ثم تقوم بعمل return للإجابة في حال نجاح عملية جلب البيانات من الملف users.json وتقوم بتمرير هذه الإجابة لدالة then التي تأتي بعدها والتي تقوم بتحويل هذه الإجابة response من نص إلى كائن JSON نتعامل معه بالجافاسكريبت ثم تقوم بتمريره هي الأخرى لدالة then التي تأتي بعدها لتقوم الأخيرة بالعمليات التي تريدها على هذا الأوبجكت (data).
أما دالة catch فهي تستدعى في حال وجود خطأ أثناء العملية برمتها فما إن يحدث خطأ في جلب ملف users.json حتى يتم استدعاؤها مباشرة.
الإعدادات

طبعا يمكن تمرير عدد من البارامترات لدالة fetch كنوع الطلب (GET, POST, PUT, DELETE, HEAD) وإعدادات الهيدر إلخ… كما يتضح في المثال أسفله :
fetch('/users.json', { method: 'POST', mode: 'cors', redirect: 'follow', headers: new Headers({ 'Content-Type': 'text/plain' }) }).then(function() { /* handle response */ });
1
2
3
4
5
6
7
8

fetch('/users.json', {
method: 'POST',
mode: 'cors',
redirect: 'follow',
headers: new Headers({
'Content-Type': 'text/plain'
})
}).then(function() { /* handle response */ });



هذا مجرد تقديم بسيط لهذه الواجهة وكيفية عملها، علما أنها ماتزال حديثة العهد وليست بعد مدعومة بشكل كامل من طرف جميع المتصفحات المعروفة.
معني JavaScript Fetch

raheel غير متواجد حالياً   اقتباس
أضف رد جديد


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
كيف تنشئ ساعة ذات عقارب باستخدام تحريكات CSS و JavaScript القيصر قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 28-07-2019 07:47 PM
صف وتسجيل ملفات Javascript و CSS في قوالب ووردبريس مهرة النجدية قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 1 27-07-2019 11:03 PM
منهج التضمين في التفسير القيصر قسم القرآن الكريم 2 25-07-2019 03:04 AM
القول المفهم في معنى: شرط الشيخين البخاري ومسلم القيصر قسم الحديث الشريف والسُنة النبوية 1 15-07-2019 11:27 AM
تصميم النّصوص البرمجيّة: تنظيم JavaScript سالجان قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress 0 28-02-2019 06:21 PM


الساعة الآن 12:04 AM

 


Content Relevant URLs by vBSEO ©2010, Crawlability, Inc.