تفسير طريقة الجلب في h5 (ملخص)

باعتباره كائنًا جديدًا في H5، تم إنشاء fetch ليحل محل وجود ajax، والغرض الرئيسي منه هو دمجه مع ServiceWorkers لتحقيق التحسينات التالية:

1. تحسين تجربة عدم الاتصال بالإنترنت
2. البقاء قابلة للتطوير

بالطبع، إذا تعاونت ServiceWorkers مع قاعدة بيانات IndexedDB من جانب المتصفح، فتهانينا، يمكن لكل متصفح أن يصبح خادمًا وكيلاً. (ومع ذلك، لا أعتقد أن هذا أمر جيد. فهو سيجعل الواجهة الأمامية أثقل وأثقل، مع اتباع المسار القديم لهندسة c/s السابقة)

نظرًا لأنها طريقة جديدة لـ h5، فلا بد أن هناك بعض المتصفحات القديمة التي لا تدعمها بالنسبة لأولئك الذين لا يدعمون هذه الطريقة

يحتاج المتصفح إلى إضافة polyfill إضافي:

[الرابط]: https://github.com/fis-components/whatwg-fetch

الجلب (الجلب):

HTML:

 fetch('/users.html') // ما يتم إرجاعه هنا هو كائن Promise. تحتاج المتصفحات التي لا تدعمه إلى استخدام ployfill المقابل أو تحويل الشفرة من خلال babel وأجهزة تحويل الترميز الأخرى قبل التنفيذ ثم(function(response) { return استجابة .text()}) .then(function(body) { document.body.innerHTML = body})

جسون:

 fetch('/users.json') .then(function(response) { return Response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(function (على سبيل المثال) { console.log("فشل التحليل"، على سبيل المثال)})

البيانات الوصفية للاستجابة:

 fetch('/users.json').then(function(response) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) وحدة التحكم .log(response.status) console.log(response.statusText)})

نموذج المشاركة:

 فار النموذج = document.querySelector('form')fetch('/users', { الطريقة: 'POST'، الجسم: new FormData(form)})

نشر JSON:

 fetch('/users', { الطريقة: 'POST', الرؤوس: { 'قبول': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ // هنا هو اسم نص الطلب لطلب النشر: "Hubot"، تسجيل الدخول: "hubot"، })})

تحميل الملف:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) // احصل على محتوى الملف المحدد data.append( ' user', 'hubot')fetch('/avatars', { الطريقة: 'POST'، الجسم: البيانات})

(1) الاختلافات عن اياكس:

1. لن تؤدي طريقة التصحيح إلى حدوث خطأ عند التقاط البيانات، حتى خطأ 404 أو 500، إلا إذا كان خطأ في الشبكة أو تمت مقاطعة عملية الطلب، ولكن بالطبع هناك حل، إليك العرض التوضيحي:

 function checkStatus(response) { if (response.status >= 200 && Response.status < 300) { // تحديد ما إذا كان رمز حالة الاستجابة طبيعيًا return Response // إرجاع كائن الاستجابة الأصلي بشكل طبيعي} else { var error = new Error (response .statusText) // إذا كان الأمر غير طبيعي، فسيتم طرح رسالة حالة خطأ في الاستجابة error.response = خطأ في رمي الاستجابة }}function parseJSON(response) { return Response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('نجح الطلب مع استجابة JSON'، البيانات) }).catch( وظيفة (خطأ) { console.log ("فشل الطلب"، خطأ) })

2. المشكلة الحرجة للغاية هي أن طريقة الجلب لا ترسل ملفات تعريف الارتباط، وهو أمر قاتل للغاية عندما يكون من الضروري الحفاظ على اتصال مستمر بين العميل والخادم، لأن الخادم يحتاج إلى تحديد جلسة من خلال ملفات تعريف الارتباط للحفاظ على الجلسة الحالة إذا كنت تريد إرسال ملفات تعريف الارتباط يتطلب تعديل المعلومات:

 fetch('/users', { بيانات الاعتماد: 'same-origin' // إرسال ملفات تعريف الارتباط في نفس المجال})fetch('https://segmentfault.com', { بيانات الاعتماد: 'تشمل' // إرسال ملفات تعريف الارتباط عبر المجالات} )

الشكل أدناه هو نتيجة الوصول عبر المجال إلى المقطع

إذا لم يكن هناك أي شيء آخر، فإن عنوان url المطلوب وعنوان url للاستجابة متماثلان، ولكن إذا تم تنفيذ عملية مثل إعادة التوجيه، فقد يكون عنوان URL للاستجابة مختلفًا في XHR، وقد لا يكون عنوان URL للاستجابة دقيقًا، ويجب تعيينه : Response.headers['X-Request-URL'] = request.url مناسب لـ (Firefox < 32، أو Chrome < 37، أو Safari، أو IE.)

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.