การตีความวิธีการดึงข้อมูลใน h5 (สรุป)

เนื่องจากเป็นอ็อบเจ็กต์ใหม่ใน H5 การดึงข้อมูลจึงถือกำเนิดขึ้นเพื่อแทนที่การมีอยู่ของ ajax จุดประสงค์หลักคือเพียงเพื่อรวมเข้ากับ ServiceWorkers เพื่อให้บรรลุการปรับให้เหมาะสมต่อไปนี้:

1. เพิ่มประสิทธิภาพประสบการณ์ออฟไลน์
2. ปรับขนาดได้

แน่นอนว่าหาก ServiceWorkers ร่วมมือกับ IndexedDB ฐานข้อมูลฝั่งเบราว์เซอร์ ก็ขอแสดงความยินดีด้วย ทุกเบราว์เซอร์สามารถกลายเป็นพร็อกซีเซิร์ฟเวอร์ได้ (แต่ผมไม่คิดว่านี่เป็นสิ่งที่ดีครับ จะทำให้ส่วนหน้าหนักขึ้นเรื่อยๆ ยึดแนวทางเก่าของสถาปัตยกรรม c/s รุ่นก่อน)

เนื่องจากเป็นวิธีการใหม่ของ h5 จึงต้องมีเบราว์เซอร์รุ่นเก่าบางรุ่นที่ไม่รองรับ สำหรับผู้ที่ไม่รองรับวิธีนี้

เบราว์เซอร์จำเป็นต้องเพิ่ม polyfill เพิ่มเติม:

[ลิงก์]: https://github.com/fis-components/whatwg-fetch

ferch (ดึงข้อมูล):

HTML:

 fetch('/users.html') //สิ่งที่ส่งคืนที่นี่คือออบเจ็กต์ Promise เบราว์เซอร์ที่ไม่รองรับจำเป็นต้องใช้ ployfill หรือการแปลงรหัสที่เกี่ยวข้องผ่าน babel และตัวแปลงรหัสอื่น ๆ ก่อนที่จะดำเนินการ จากนั้น(function(response) { return การตอบสนอง .text()}) .then (ฟังก์ชั่น (body) { document.body.innerHTML = body})

เจสัน:

 fetch('/users.json') .then(function(response) { return response.json()}) .then(function(json) { console.log('parsed json', json)}) .catch(ฟังก์ชั่น (เช่น) { 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)})

แบบฟอร์มการโพสต์:

 var form = document.querySelector('form')fetch('/users', { method: 'POST', body: new FormData(form)})

โพสต์ JSON:

 fetch('/users', { method: 'POST', ส่วนหัว: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ //here เป็นชื่อเนื้อหาคำขอของคำขอโพสต์: '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', body: data})

(1) ความแตกต่างจากอาแจ็กซ์:

1. วิธีการแก้ไขจะไม่เกิดข้อผิดพลาดเมื่อดึงข้อมูล แม้แต่ข้อผิดพลาด 404 หรือ 500 เว้นแต่จะเป็นข้อผิดพลาดของเครือข่ายหรือกระบวนการร้องขอถูกขัดจังหวะ แต่แน่นอนว่ามีวิธีแก้ไข นี่คือการสาธิต:

 ฟังก์ชั่น checkStatus (ตอบกลับ) { if (response.status >= 200 && response.status < 300) { // ตรวจสอบว่ารหัสสถานะการตอบสนองเป็นปกติหรือไม่ return response // ส่งคืนออบเจ็กต์การตอบสนองดั้งเดิมตามปกติ} else { ข้อผิดพลาด var = ข้อผิดพลาดใหม่ (response .statusText) //หากผิดปกติ ข้อความสถานะข้อผิดพลาดในการตอบกลับจะถูกส่ง error.response = ข้อผิดพลาดในการตอบกลับ }}function parseJSON(response) { return response.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('request Successed with JSON Response', data) }).catch( ฟังก์ชั่น (ข้อผิดพลาด) { console.log ('คำขอล้มเหลว' ข้อผิดพลาด) })

2. ปัญหาที่สำคัญมากคือวิธีการดึงข้อมูลไม่ได้ส่งคุกกี้ ซึ่งเป็นอันตรายอย่างยิ่งเมื่อจำเป็นต้องรักษาการเชื่อมต่ออย่างต่อเนื่องระหว่างไคลเอ็นต์และเซิร์ฟเวอร์ เนื่องจากเซิร์ฟเวอร์จำเป็นต้องระบุเซสชันผ่านคุกกี้เพื่อรักษาเซสชัน สถานะ หากคุณต้องการส่งคุกกี้ต้องมีการแก้ไขข้อมูล:

 fetch('/users', { หนังสือรับรอง: 'same-origin' //ส่งคุกกี้ในโดเมนเดียวกัน})fetch('https://segmentfault.com', { หนังสือรับรอง: 'include' //ส่งคุกกี้ข้ามโดเมน} )

รูปด้านล่างนี้เป็นผลจากการเข้าถึงกลุ่มแบบข้ามโดเมน

หากไม่มีสิ่งใดเลย URL ที่ร้องขอและ URL ตอบกลับจะเหมือนกัน แต่หากดำเนินการเช่นการเปลี่ยนเส้นทางแล้ว response.url อาจแตกต่างกัน ใน XHR จำเป็นต้องตั้งค่า response.url หลังจากการเปลี่ยนเส้นทาง : response.headers['X-Request-URL'] = request.url เหมาะสำหรับ (Firefox < 32, Chrome < 37, Safari หรือ IE)

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network