Interpretasi metode pengambilan di h5 (ringkasan)

Sebagai objek baru di H5, Fetch lahir untuk menggantikan keberadaan ajax. Tujuan utamanya hanya untuk digabungkan dengan ServiceWorkers untuk mencapai optimasi berikut:

1. Optimalkan pengalaman offline
2. Tetap terukur

Tentu saja, jika ServiceWorkers bekerja sama dengan database sisi browser IndexedDB, selamat, setiap browser bisa menjadi server proxy. (Namun, menurut saya ini bukan hal yang baik. Ini akan membuat bagian depan semakin berat, mengambil jalur lama dari arsitektur c/s sebelumnya)

Karena ini adalah metode baru dari h5, pasti ada beberapa browser lama yang tidak mendukungnya

Browser perlu menambahkan polyfill tambahan:

[Tautan]: https://github.com/fis-components/whatwg-fetch

ferch(mengambil):

HTML:

 ambil('/users.html') //Yang dikembalikan di sini adalah objek Promise. Browser yang tidak mendukungnya perlu menggunakan ployfill atau transcode yang sesuai melalui babel dan transcoder lainnya sebelum mengeksekusinya respons .text()}) .then(function(body) { document.body.innerHTML = body})

JSON:

 ambil('/pengguna.json') .lalu(fungsi(respons) { kembalikan respons.json()}) .lalu(fungsi(json) { konsol.log('diuraikan json', json)}) .catch(fungsi (misal) { console.log('parsing gagal', misal)})

Metadata tanggapan:

 ambil('/pengguna.json').lalu(fungsi(respons) { console.log(response.headers.get('Content-Type')) console.log(response.headers.get('Date')) konsol .log(response.status) console.log(response.statusText)})

Formulir posting:

 var form = document.querySelector('form')fetch('/users', { metode: 'POST', isi: FormData baru(form)})

Posting JSON:

 ambil('/pengguna', { metode: 'POST', header: { 'Terima': 'aplikasi/json', 'Jenis Konten': 'aplikasi/json' }, isi: JSON.stringify({ //di sini Apakah nama isi permintaan kiriman: 'Hubot', login: 'hubot', })})

Unggah berkas:

 var input = document.querySelector('input[type=file]')var data = new FormData()data.append('file', input.files[0]) //Dapatkan konten file yang dipilih data.append( ' pengguna', 'hubot')fetch('/avatar', { metode: 'POST', isi: data})

(1) Perbedaan dari ajax:

1. Metode patch tidak akan menimbulkan error saat mengambil data, bahkan error 404 atau 500, kecuali error jaringan atau proses request terganggu.

 function checkStatus(response) { if (response.status >= 200 && respon.status < 300) { //Tentukan apakah kode status respons normal kembalikan respons //Kembalikan objek respons asli secara normal} else { var error = new Error (response .statusText) //Jika tidak normal, pesan status error respon akan ditampilkan error.response = respon throw error }}function parseJSON(response) { return respon.json()}fetch('/users') .then(checkStatus) .then(parseJSON) .then(function(data) { console.log('permintaan berhasil dengan respons JSON', data) }).catch( fungsi(kesalahan) { console.log('permintaan gagal', kesalahan) })

2. Masalah yang sangat kritis adalah metode pengambilan tidak mengirimkan cookie, yang sangat fatal bila diperlukan untuk menjaga koneksi konstan antara klien dan server, karena server perlu mengidentifikasi sesi melalui cookie untuk mempertahankan sesi. menyatakan. Jika Anda ingin Mengirim cookie memerlukan modifikasi informasi:

 ambil('/pengguna', { kredensial: 'asal yang sama' //Kirim cookie di domain yang sama})fetch('https://segmentfault.com', { kredensial: 'sertakan' //Kirim cookie ke seluruh domain} )

Gambar di bawah ini merupakan hasil akses lintas domain ke segmen

Jika tidak ada yang lain, url yang diminta dan url respons sama, tetapi jika operasi seperti pengalihan dilakukan, respon.url mungkin berbeda. Di XHR, respon.url setelah pengalihan mungkin tidak akurat, perlu disetel : respon.headers['X-Request-URL'] = request.url cocok untuk (Firefox < 32, Chrome < 37, Safari, atau IE.)

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.