Cara menggunakan ACYNC pada JavaScript
Mengenal Fungsi Asynchronous Request di Javascript- Show Halo rekan-rekan developer, Umumnya dalam dunia programing, kode yang kita tuliskan berjalan secara synchronous, begitu pula pada Javascript. Synchronous ini membuat kode yang kita tuliskan dijalankan secara berurutan. Hal ini sangat lemah ketika kita gunakan untuk melakukan sebuah pekerjaan yang berat, atau
pekerjaan yang membutuhkan waktu yang belum dapat kita pastikan kapan pekerjaan itu selesai. bad user experience Jika dari segi UX saja sudah buruk, lantas siapa yang mau akses website kita dengan cara tersebut? Untuk mengatasinya, kita harus melakukan pekerjaan tersebut secara asynchronous. Kode yang dituliskan secara asynchronous akan dieksekusi di belakang thread utama atau biasa disebut main thread. Hal tersebut tidak akan membloking proses runtime atau menunggu hingga proses selesai dilakukan. Sembari menunggu proses tersebut selesai, compiler akan mengeksekusi perintah kode selanjutnya. Pada Javascript, Asynchronous JavaScript and XMLHTTP atau biasa disebut AJAX merupakan salah satu konsep yang menerapkan metode asynchronous dalam menjalankan pekerjaannya. Biasa nya AJAX digunakan untuk melakukan permintaan data (request) dan menangani sebuah tanggapan (handling response), baik response dalam bentuk XML, Javascript ataupun JSON dari sebuah Rest API. Asynchronous Request Javascript Pada artikel kali ini, kita akan berkenalan dengan beberapa fungsi AJAX request. Yang pertama menggunakan XHR. Yang kedua, menggunakan JQuery. Dan yang ketiga menggunakan metode terbaru yang tentu paling disarankan saat ini yaitu dengan fungsi Fetch.
AJAX dengan menggunakan XHRXMLHTTPRequest (atau disingkat XHR) merupakan salah satu teknik dalam membuat AJAX request. XHR yang tersedia secara native pada Javascript merupakan sesuatu keunggulan, tetapi untuk menggunakan XHR secara murni, banyak langkahnya. Apa pasal? Rupanya karena kita membuat sebuah fungsi AJAX secara manual. Penasaran? Mari kita coba. Silakan buka repository yang sudah kalian clone, dan pastikan kamu berada pada branch master. Sebagai langkah awal, buatlah sebuah objek dari XMLHTTPRequest.
AJAX dengan menggunakan JQueryJika kamu merasa langkah sebelumnya kurang praktis, dengan bantuan library JQuery beberapa langkah tersebut sudah tak lagi diperlukan. Pada dasarnya, Fungsi AJAX menggunakan JQuery sama halnya dengan menggunakan XHR, tetapi kita tidak perlu membuat instance objek dari XMLHTTPRequest. Hanya saja untuk menggunakannya, tentu kita perlu menambahkan library JQuery pada project kita. Untuk latihan kali ini, cukup tambahkan tag script berikut di akhir tag pada index.html.
Mari kita ubah kode pada fungsi getTeam menggunakan AJAX JQuery seperti berikut:
AJAX dengan menggunakan Fetch APIFungsi yang ketiga ini merupakan gabungan XHR dan JQuery. Apa sih maksudnya? Fetch API ini merupakan fungsi native yang tersedia pada Javascript dan tidak kalah praktis seperti JQuery saat menggunakannya. Fetch merupakan cara baru dalam melakukan network request. Pada dasarnya fungsi fetch memanfaatkan sebuah Promise, sehingga untuk menggunakan nya pastikan browser sudah mendukung ECMAScript 6 atau biasa disebut ES6. Good news! Karena kebanyakan browser sekarang sudah mendukung ES6 ini. Atau kamu dapat menggunakan teknik polyfill untuk browser yang belum mendukung ES6. Untuk menggunakan fetch, cukup gunakan keyword fetch() kemudian
tuliskan URL yang akan dituju di dalam tanda kurung tersebut.
Dari kode diatas dapat disimpulkan seperti ini. Jika request pada fetch berhasil dilakukan, maka blok then akan terpanggil dan mengembalikan nilai objek sesuai response yang didapat. Apabila fungsi fetch gagal dilakukan, maka blok catch akan terpanggil dan menampilkan eror pada console. Kemudian untuk mengambil nilai objek yang dikembalikan pada blok then, kita dapat memanggil kembali fungsi then setelah pemanggilan fungsi catch. Perhatikan kode di bawah ini:
Kemudian jika kita terapkan fetch pada fungsi getTeam, maka kode pada fungsi tersebut akan menjadi seperti ini:
KesimpulanSetelah coba menerapkan AJAX dengan metode berbeda-beda, apa metode terfavoritmu kini? Tulis di kolom komentar berikut alasannya ya. Sebagai bahan komparasi, masing-masing metode sudah didokumentasikan melalui branch pada repository yang kamu clone sebelumnya. Selamat mencoba! Kelas terkait:Materi artikel ini dapat kamu gali lebih dalam di kelas Membangun Progressive Web Apps. Klik di sini untuk detailnya. Artikel lain terkait:
Apa itu asynchronous JavaScript?Jawabannya adalah JavaScript melakukannya secara asynchronous. Pada konsep asynchronous, code akan dieksekusi tanpa menunggu eksekusi code lain selesai sehingga seakan-akan dieksekusi secara bersamaan. setTimeout pada code di atas membuat kata the time has come akan ditampilkan setelah 3 detik.
Kapan menggunakan async Await?Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous.Async/Await merupakan sebuah syntax khusus yang digunakan untuk menangani Promise agar penulisan code lebih efisien dan rapih.
Apa itu async function?Async sendiri merupakan sebuah fungsi yang mengembalikan sebuah Promise. Await sendiri merupakan fungsi yang hanya berjalan di dalam Async. Await bertujuan untuk menunda jalannya Async hingga proses dari Await tersebut berhasil dieksekusi.
Apa itu Await di JavaScript?Keyword await membuat JavaScript menunggu sampai promise tersebut selesai dan mengembalikkan hasilnya.
|