✅Apakah perbezaan antara fetch dan XMLHTTPRequest?

Hello semua! Semasa mengerjakan projek yang menarik, saya mempunyai idea untuk memberitahu tentang perbezaan antara fetch dan XMLHTTPRequest. Sebenarnya, soalan itu kedengaran agak menarik jika anda tahu sejarah penciptaannya, dalam erti kata ia sedikit tidak betul, tetapi anda masih perlu tahu mengenainya, kerana, katakan, bagi saya sebagai pemaju, apabila saya berurusan dengan pelbagai jenis API setiap hari, adalah berguna untuk mengetahui agar tidak membuat kod yang tidak diperlukan.

Apakah itu XMLHTTPRequest dan sejarah ringkas penciptaannya

Dalam javascript, objek XMLHttpRequest digunakan untuk berinteraksi dengan pelayan. Anda boleh mendapatkan semula data daripada URL tanpa perlu melakukan muat semula halaman penuh. Ini membolehkan halaman Web mengemas kini hanya sebahagian daripada halaman tanpa mengganggu apa yang pengguna lakukan. Tetapi secara amnya, secara terang-terangan, ia adalah API. Dan apabila kami mendengar ini, kami serta-merta mengingati konsep gelung acara, tak segerak (apabila pelaksanaan kod akan selesai selepas masa tertentu), dll. Contohnya, kod menggunakan XMLHTTPRequest kelihatan seperti ini:

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

Sejarah penciptaan XMLHTTPRequest sendiri membawa kita kembali ke tahun-tahun yang jauh apabila dinosaur berjalan... Okay, gurau je. Malah, API ini mula-mula dibangunkan oleh Microsoft dan telah diperkenalkan dalam komponen Outlook pada web produk perisian Microsoft Exchange Server 2000.

Pada masa itu, ia dipanggil secara berbeza - IXMLHTTPRequest dan sedikit, jika seseorang boleh mengatakan demikian dalam versi pertama antara muka, berbeza daripada yang sekarang. Iaitu, asasnya jelas kekal, tetapi jelas bahawa pelarasan telah dibuat selama 25 tahun. Kemudian, ia telah ditambahkan pada MSXML 2.0, malah kemudiannya, ke Internet Explorer 5 pada Mac 1999.

Kemudian, pengaturcara Mozilla membangunkan versi API mereka sendiri berdasarkan IXMLHTTPRequest, kemudian dipanggil nsIXMLHttpRequest, dan menjadikannya boleh diakses melalui XMLHttpRequest kesayangan kami. Semua ini telah ditambahkan pada Gecko versi 0.6 pada Disember 2000 (Gecko ialah enjin pelayar yang digunakan dalam FireFox dan banyak tempat lain). Pada masa itu, tiada perkara seperti FireFox, kerana versi pertamanya dikeluarkan pada September 2002 dan dipanggil Phoenix, kemudian FireBird dan hanya pada tahun 2004 FireFox. Kemudian, sebelum semua ini, terdapat Netscape Navigator, tetapi konfrontasi dengan Internet Explorer dan itu sahaja - itu cerita lain, yang tidak ada gunanya ditulis dalam artikel ini. Kemudian, sokongan telah ditambahkan pada Safari, Opera dan penyemak imbas lain. Oleh itu, apabila orang memberitahu anda bahawa objek ini digunakan untuk keserasian dengan pelayar lama, maka sudah tentu mereka betul, kerana ia membawa kita ke akhir 90-an, ketika pembangunan web baru dibangunkan. Anda juga boleh mengingati masa gelembung dotcom, tetapi, diakui, ia lebih awal sedikit, atau pada masa itu (jika kita menggunakan Internet Explorer), tetapi begitu juga ketika itu.

Jadi apa bezanya?

Jadi, kembali kepada soalan tentang perbezaan, perbezaan yang paling penting sudah tersembunyi dalam sejarah, kerana XMLHTTPRequest hanyalah API lama tetapi disokong, dan fetch hanyalah API baharu, yang jenis menggantikannya. Sehingga hari ini, XMLHTTPRequest 2.0 telah dikeluarkan pada Januari 2012, tetapi edisi terkini standard 1.0 telah dikeluarkan pada bulan Disember tahun yang sama. Ini ialah standard semasa untuk objek ini. Tetapi sekarang bayangkan wajah pembangun yang menulis ini sepanjang masa:

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

bukan ini

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData', true);

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.onerror = function () {
    console.error('There was a network error.');
};

xhr.send();

beberapa tahun lalu. Itu sahaja yang terlintas di fikiran serta-merta.

Tetapi serius, berikut ialah senarai pendek perbezaan:

1. Berorientasikan janji: API Ambil menggunakan janji, yang menjadikannya lebih mudah untuk bekerja dengan kod tak segerak dan membolehkan anda menggunakan binaan mudah seperti .then() dan async serta menunggu.

2. Antara muka ringkas: API Ambil mempunyai sintaks yang lebih ringkas dan intuitif. Contohnya, untuk membuat permintaan, anda tidak perlu mencipta objek dan menetapkan sifatnya, seperti yang berlaku dengan XHR.

3. Sokongan untuk ciri baharu: API Ambil menyokong ciri baharu seperti objek Permintaan dan Respons, yang menyediakan kaedah mudah untuk bekerja dengan permintaan, respons dan transformasinya.

4. Sokongan untuk strim: API Ambil menyokong data penstriman, yang membolehkan anda bekerja dengan jumlah data yang besar semasa ia diterima.

5. Membatalkan permintaan: Walaupun API Ambil tidak mempunyai sokongan terbina dalam untuk membatalkan permintaan, anda boleh menggunakan pengawal batal untuk berbuat demikian, yang menjadikan pengurusan permintaan lebih fleksibel.

6. Penyesuaian yang dipertingkatkan: API Ambil menyediakan lebih banyak pilihan untuk mengkonfigurasi permintaan, seperti menetapkan pengepala, mod caching dan parameter lain.

7. sokongan cors: API Fetch menyediakan lebih fleksibiliti dalam bekerja dengan CORS (Perkongsian Sumber Silang Asal), yang membolehkan konfigurasi permintaan yang lebih fleksibel kepada sumber daripada domain lain.

8. Pengendalian ralat yang lebih baik: Apabila bekerja dengan API Ambil, anda boleh mengendalikan status respons dengan lebih baik, kerana ralat permintaan (cth. rangkaian tidak tersedia) akan menolak janji, manakala respons yang berjaya dengan kod 4xx atau 5xx tidak akan menolaknya dan anda perlu menyemak sendiri kod status.

Ini sudah tentu bukan saya, tetapi ia hanya gambar yang keren

Dan, sudah tentu, terdapat banyak lagi perbezaan, tetapi saya tidak nampak guna menyenaraikannya sekarang, kerana mengikut semua parameter, jelas bahawa ini hanyalah versi yang lebih baik daripada standard lama untuk keperluan penyemak imbas moden.

Akhir kata

Pada mulanya saya terfikir untuk menulis satu baris yang mengambil adalah standard yang lebih baharu, tetapi ia akan menjadi terlalu mudah dan tidak bermaklumat, sedangkan sebenarnya terdapat banyak perkara menarik di sana yang boleh diberitahu. Anda boleh menulis keseluruhan artikel tentang fetch sahaja, tetapi tiada perkara khusus dalam artikel ini. Tetapi, secara keseluruhan, pada pendapat saya, semuanya nampak ok.

Terima kasih banyak kerana membaca artikel!

P. S.

Sebenarnya, projek ini ialah HMPL. Ia adalah bahasa templat kecil untuk memaparkan UI dari pelayan ke pelanggan. Alangkah baiknya jika anda boleh menilai projek ini dengan bintang. Terima kasih!

Bintang HMPL

Atas ialah kandungan terperinci ✅Apakah perbezaan antara fetch dan XMLHTTPRequest?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!