Cara menggunakan GETASYNC pada JavaScript
Pada tahap ini kita akan menambahkan proses untuk pengambilan data artikel dari DB pada router yang sudah dibuat. Jika kamu masih ingat pada part sebelumnya tentang Dasar Router ada 2 endpoint yang digunakan untuk pengambilan data. Pertama untuk membaca semua data dan yang kedua untuk mengambil spesifik data berdasarkan ID yang ditentukan. Show
Mengambil Semua DataPertama kita perlu mengimport models ke dalam router. Buka file routes/posts.js, dan tambahkan baris kode berikut: routes/posts.js
Selanjutnya fokus pada bagian baris kode ini: routes/posts.js
Ubah bagian tersebut menjadi seperti kode di bawah ini: routes/posts.js
Sedikit penjelasan dari kode di atas
Baris kode di atas digunakan untuk mengambil semua data artikel dari tabel posts. posts sendiri adalah nama model yang merepresentasikan nama tabel dan findAll adalah method yang digunakan untuk mengambil semua data. Jika ditulis ke dalam query MySQL kira-kira akan seperti ini:
Untuk mengecek apakah kode sudah benar kita bisa mencoba mengakses API kita menggunakan POSTMAN atau bisa menggunakan CURL dengan mengetikkan perintah ini di terminal:
Kalau benar seharusnya outputnya akan seperti ini:
Mengambil Data berdasarkan IDSelanjutnya untuk router yang menangani pengambilan data berdasarkan ID maka kita perlu mengubah baris kode pada bagian ini: routes/posts.js
Lakukan perubahan menjadi seperti ini routes/posts.js
Pada proses ini kita perlu menangkap parameter ID dengan perintah ini:
Kalau data ditemukan maka API akan mengembalikan response data itu sendiri dengan status OK dan sebaliknya kalau data tidak ditemukan maka akan mengembalikan response status 404 (Data not found). Oke coba kita test lagi menggunakan CURL. Pertama kita akan mengetes menggunakan ID yang valid.
Jika data ditemukan akan menghasilkan response seperti ini:
Kedua kita coba menggunakan ID yang tidak valid
Seharusnya responsenya seperti di bawah ini. statusnya akan NOT_FOUND
Untuk mendownload atau melihat full source code pada tahap ini, silahkan kunjungi repo github https://github.com/sakukode/simple-restapi/tree/v0.4 Artikel ini dibaca sebanyak 2.085 kali Kapan kita menggunakan asynchronous?Proses asynchronous sering digunakan untuk komunikasi data, karena data menjadi bagian inti dari sebuah aplikasi maka konsep asynchronous sangat penting untuk dipahami.
Apa itu fetch dalam JavaScript?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.
Apa itu Await di JS?Keyword await membuat JavaScript menunggu sampai promise tersebut selesai dan mengembalikkan hasilnya.
Apa itu callback function JavaScript?Callback pada Javascript adalah sebuah fungsi yang dikirimkan sebagai parameter fungsi lainnya. Fungsi diatas adalah sebuah contoh callback yang berjalan secara Synchronous karena fungsi callback langsung dieksekusi pada sebuah proses fungsi yang memiliki sifat synchronous.
|