Hallo Teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama, kali ini kita akan membahas mengenai cara menggunakan Axios pada aplikasi / project di node js, mungkin diantara teman-teman semuanya ada yang belum mengetahui apa itu Axios,,
Axios Merupakan sebuah klien HTTP ringan yang berdasarkan layanan $http dalam angular.js V1.x, tools ini mirip dengan Fetch API pada javascript yang dimana bertujuan untuk mengambil data berupa API dari sebuah url tertentu dan untuk lebih lengkapnya silahkan kunjungi link berikut untuk pengertian dan cara menggunakan Axios https://axios-http.com/docs/intro
nahh untuk mempersingkat waktu selanjutnya kita akan langsung masuk ke dalam cara penggunaan axios pada project Node Js kita, silahkan ikuti langkah-langkah berikut ini :
Langkah 1. Membuat Folder Projek dan menginstall depedency yang dibutuhkan
Pada langkah pertama silahkan teman-teman membuat sebuah folder untuk menyimpan projek aplikasi yang akan kita bangun menggunakan node js, untuk lokasi folder sendiri silahkan sesuaikan dengan keinginan teman-teman semuanya, jika teman-teman sudah membuat folder aplikasinya silahkan jalankan perintah berikut ini di terminal teman-teman semuanya :
npm init -y
jika anda menjalankan perintah berikut di dalam folder yang telah kita buat tadi maka tampilannya akan sebagai berikut ini :
selanjutnya kita akan membuat file baru yang nantinya kita gunakan untuk web server node js, silahkan buat file dengan nama index.js
selanjutnya kita akan menginstall depedency yang dibutuhkan silahkan jalankan perintah berikut ini :
npm install express axios
Berikut fungsi dari kedua depedency diatas
express => berfungsi untuk membuat web server, lebih lengkap kunjungi link ini
axios => tools http yang akan kita gunakan
Langkah 2. Membuat Web server
Selanjutnya kita akan membuat sebuah web server menggunakan depedency express yang sudah kita install, silahkan copy source code di bawah ini dan paste kan ke file index.js, jika anda ingin lebih paham mengenai cara membuat web server di node js, silahkan kunjungi link ini https://blog.cakdunsite.com/2022/01/membuat-web-server-menggunakan-express.html
Langkah 3. Penggunaan Axios
oke selanjutnya kita akan menggunakan axios untuk mengambil sebuah data melalui API, namun disini kita terlebih dahulu harus memiliki rest-api nya, disini kita bisa menggunakan rest-api yang gratis, silahkan kunjungi link berikut ini untuk mendapatkan rest api https://jsonplaceholder.typicode.com/ dan silahkan scroll website tersebut sehingga mendapatkan link rest api sebagai berikut ini :
Silahkan pilih data api yang terdapat pada link gambar diatas, dan silahkan salin url dari link tersebut, disini saya akan menggunakan link rest-api /comments dan dengan link rest-api https://jsonplaceholder.typicode.com/comments, teman-teman bisa menggunakan link Api yang sama dengan yang saya gunakan juga.
nahh jika kita sudah mendapatkan link API nya, selanjutnya kita akan membuat sebuah file dengan nama routes.js dan silahkan copy dan pastekan source code dibawah ini ke dalam file routes.js yang baru kita buat.
node index.js
maka aplikasi kita akan berjalan seperti gambar dibawah ini :
nahh selanjutnya buka browser teman-teman semuanya silahkan akses url berikut ini :
http://localhost:8080/
Selanjutnya kita akan menampilkan data API menggunakan axios, disini terdapat dua cara dalam mengambil data API menggunakan Axios yang dimana cara yang pertama menggunakan then dan yang kedua menggunakan asynchronous functions silahkan teman-teman source code nya pada file routes.js berikut hasil dari pengambilan data menggunakan axios :
cara 1. menggunakan then
URL : http://localhost:8080/get-data-1
berikut data yang dihasilkan ketika menggunakan axios pada cara 1
Cara 2. Menggunakan Asynchronous functions
URL : http://localhost:8080/get-data-2
berikut data yang dihasilkan ketika menggunakan axios pada cara 2
Sekian Dan terimakasih, jika teman-teman ada yang bingung silahkan tinggalkan pesan di kolom komentar.....
0 Komentar