Axios adalah cara yang sedang booming saat ini untuk melakukan request HTTP karena memliliki banyak kelebihan, jika teman-teman sebelumnya sudah pernah belajar AJAX, nah itu sama seperti AJAX bedanya itu adalah cara tradisionalnya, kurang lebih seperti itu, dan disini kita akan mencobanya cara menggunakan axios di Vuejs seperti apa jangan kemana-mana simak terus ya teman-teman.

Untuk melakukan cara menggunakan axios di Vuejs teman-teman bisa gunakan cara menginstall vuejs menggunakan webpack ya teman-teman seperti ini:

jika sudah jangan lupa di install npm nya, dan jika sudah silahkan teman-teman install npm axiosnya

Oke persyaratan utama sudah beres sekarang kita langsung menyetting atau mengaturnya, disini saya akan contohkan di app.vue dimana app.vue saya akan buat sebuah button ketika button itu di klik maka dia akan merespon ke webservicenya dan menampilkan hasilnya, dan settingannya seperti ini:

Kasus di atas itu ketika button GET di klik maka trigger_get akan berjalan dan seperti ini

code di atas lah yang di sebut sebuah axios, dan axios di atas yang saya gunakan kan adalah axios dengan cara GET, dan membawa parmas dengan data msg, yang berisi “halo saya dari vue weback” dan then sendiri jika benar dan catch jika tejadi error maka akan tampil pesan apa seperti itu.

code di atas adalah nama file webservicenya ya, dimana kita akan menghubungkan ke data webservicenya, jika sudah sampai disini tugas kita belum selesai ya, kita harus mengatur lagi proxy nya di webpack.config.js seperti ini, silahkan teman-teman cari data devServer dan silahkan tambahkan data ini:

Jangan lupa portnya sesuaikan dengan port teman-teman saat ini dan jika sudah di file interface.php saya hanya mengisi file $_GET[“msg”]; jika berhasil nanti di console.log akan muncul sebuah data bahwa kita sudah berhasil menampilkan data GET yang sudah kita setting tadi, oke saya rasa cukup sampai disini belajar kita tentang cara menggunakan axios di Vuejs semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.