Apa Sih Fungsi Dari Asynchronous Request di Javascript?

Biasanya dalam dunia pemrograman, kode yang kita tulis dan jalankan secara sinkron dalam Javascript. Sinkronisasi Ini memungkinkan kode yang kita tulis untuk dijalankan secara berurutan. Sangat lemah ketika kita menggunakannya untuk melakukan pekerjaan berat, atau pekerjaan yang membutuhkan waktu dan kita tidak dapat menentukan kapan pekerjaan itu selesai.

Jika kita menjalankan pekerjaan secara serempak, proses runtime akan diblokir hingga pekerjaan selesai. Yang paling menakutkan adalah pengguna akan terganggu oleh pemblokiran.

Jika pengalaman pengguna buruk, lalu siapa yang ingin mengunjungi situs web kami dengan cara ini?​​ Untuk mengatasi masalah ini, kita harus menyelesaikan pekerjaan secara asynchronous.

Kode yang ditulis secara asynchronous akan dieksekusi setelah main thread atau biasa disebut dengan main thread. Itu tidak memblokir proses runtime atau menunggu proses selesai. Sambil menunggu proses selesai, kompiler akan menjalankan perintah kode berikutnya.

Dalam Javascript, asynchronous JavaScript dan XMLHTTP atau biasa disebut dengan AJAX adalah konsep penerapan metode asynchronous untuk melakukan pekerjaannya. AJAX biasanya digunakan untuk mengirim permintaan data (requests) dan menangani tanggapan (handling response), baik yang berupa XML, Javascript, atau JSON dari Rest API.

Pada artikel ini, kita akan mengenal beberapa fungsi permintaan AJAX. Yang pertama menggunakan XHR. Yang kedua adalah menggunakan JQuery. Ketiga, gunakan cara terbaru yang tentunya paling direkomendasikan saat ini adalah fungsi Fetch.

AJAX dengan menggunakan XHR

XMLHTTPRequest (atau disingkat XHR) adalah teknologi untuk membuat permintaan AJAX. XHR tersedia secara native di Javascript merupakan keuntungan, tetapi untuk menggunakan XHR murni, ada banyak langkah. Apa artikelnya? Jelas karena kami membuat fungsi AJAX secara manual. penasaran? Mari kita coba.

  • Silakan buka repositori yang Anda kloning dan pastikan Anda berada di cabang master.
  • Langkah pertama adalah membuat objek dari XMLHTTPRequest.
  • Selanjutnya, kita menggunakan fungsi open untuk menentukan metode HTTP dan URL target.
  • Kemudian tentukan fungsi pemrosesan untuk kejadian onload dan onerror. Sekarang, langkah terakhir adalah mengirim permintaan menggunakan fungsi kirim.

AJAX dengan menggunakan JQuery

Jika dirasa langkah-langkah sebelumnya kurang praktis, beberapa langkah tersebut sudah tidak diperlukan lagi dengan bantuan library JQuery. Pada dasarnya, fungsi AJAX menggunakan JQuery dengan cara yang sama seperti XHR, tetapi kita tidak perlu membuat instance objek dari XMLHTTPRequest. Hanya untuk menggunakannya, tentu saja kita perlu menambahkan library JQuery ke proyek kita.

Lihat, berapa banyak langkah yang dihapus sebelumnya? Demikian pula, kita tidak perlu membuat objek dari XMLHTTPRequest, dan dapat langsung menyelesaikan pemrosesan respons dengan memanggil fungsi done dan fail. Bukankah itu praktis? Jika kami mencoba menjalankan proyek di browser, hasil yang sama akan ditampilkan.

AJAX dengan menggunakan Fetch API

Fungsi ketiga ini merupakan kombinasi dari XHR dan JQuery. Ambil adalah cara baru permintaan jaringan. Fungsi fetch pada dasarnya menggunakan Promise, jadi untuk menggunakannya, pastikan browser Anda mendukung ECMAScript 6, atau yang biasa dikenal dengan ES6. kabar baik! Karena sebagian besar browser sekarang mendukung ES6 ini. Atau Anda dapat menggunakan teknologi polyfill untuk browser yang tidak mendukung ES6.

Untuk menggunakan fetch, cukup gunakan kata kunci fetch() dan tulis URL yang ingin Anda kunjungi dalam tanda kurung.

Karena fetch mengembalikan Promise, untuk pemrosesan respons, kami menggunakan then (jika Promise mengembalikan resolve) dan catch (jika Promise mengembalikan reject). Harap perhatikan kode berikut:

Kesimpulan ini dapat diambil dari kode di atas. Jika permintaan pada pengambilan berhasil, maka blok dipanggil dan nilai objek dikembalikan sesuai dengan respons yang diperoleh. Jika fungsi pengambilan gagal, blok tangkap akan dipanggil dan kesalahan akan ditampilkan di konsol.

Kemudian untuk mengambil nilai objek yang dikembalikan di blok then, kita dapat memanggil fungsi then lagi setelah fungsi catch dipanggil.

Parameter data dalam fungsi then adalah nilai yang dikembalikan oleh response.json(), jika tidak maka tidak akan terdefinisi jika fungsi fetch gagal (blok catch dipanggil).

Kesimpulan

Setelah mencoba berbagai metode untuk mengimplementasikan AJAX, apa metode favorit Anda sekarang?

Tulis alasan berikut di kolom komentar ya. Sebagai perbandingan, setiap metode didokumentasikan melalui cabang di repositori yang Anda kloning sebelumnya.

Semoga beruntung!

Sumber : https://majapahit.id/