Tutorial Vue Js 3, Cara Mengambil dan Menampilkan Data dari API Publik menggunakan Axios

Assalamualaikum, kali ini akan belajar cara menampilkan data menggunakan Vue Js 3. Data yang kita tampilkan adalah data API publik yang bisa kalian Cek Disini. Saat tutorial ini dibuat, kita masih menggunakan Vue Js 3 versi beta. Sebelum melanjutkan tutorial ini saya harap kalian sudah paham dasar-dasar Vue Js seperti perulangan, pengkondisian, dan lainnya, yang mana dapat kalian temukan tutorialnya di website ini juga.

Langsung saja kita menuju tutorialnya, pertama kalian harus install projek Vue js 3 kalian, jika belum tahu caranya silahkan lihat disini.

Selanjutnya kita butuh dependensi berupa AXIOS untuk mengelola API.

Axios sendiri merupakan library open source untuk melakukan request HTTP yang sangat popular saat ini. kalian cukup melakukan install dengan mengetikkan  npm install axios --save  di terminal kalian.

Jika sudah, di folder src buat folder plugins kemudian buat file axios.js dan import axios yang sudah kalian install tadi disitu. Hal ini untuk mempermudah pengorganisasian kode serta memudahkan kerja tim nantinya. Kode lengkap nya seperti berikut.

src/plugins/axios.js

1 2 3 4

import axios from "axios"; axios.defaults.baseURL = process.env.VUE_APP_API_URL; export default axios;

Pada baris kedua, akan kita bahas nanti tentang default base URL, jadi misal kalian sekarang menggunakan url API https://reqres.in/api/users jadi kita ambil base urlnya https://reqres.in/api, jadi di script js nya kita hanya menuliskan url 'users'. 

Begitupun jika ada url API https://reqres.in/api/books kita hanya akan menuliskan urlnya 'books'.

Untuk lebih jelasnya mending lanjut aja dulu, sekarang buka buat file User.vue pada folder components dan ketikkan kode berikut.

src/components/User.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<template> <div class="user-page flex w-full"> <h1>User Page</h1> <ul style="display: flex"> <li v-for="user in state.users.data" :key="user.id" style="margin: 0 2rem" > <div><img :src="user.avatar" alt="" /></div> {{ user.first_name }} </li> </ul> <button @click="prev" :disabled="state.users.page == 1">Prev</button> <button @click="next" :disabled="state.users.page == 2">Next</button> </div> </template> <script> import { onMounted, reactive } from "vue"; import axios from "../plugins/axios"; export default { setup() { //data users akan disimpan disini const state = reactive({ users: {}, }); //ketika pertama dimuat, akan langsung mengambil data API onMounted(async () => { const { data } = await axios.get(`/users`); state.users = data; }); //method untuk button next async function next() { const { data } = await axios.get(`/users?page=2`); state.users = data; } //method untuk button previous async function prev() { const { data } = await axios.get(`/users?page=1`); state.users = data; } //semua variable dan method harus kita return agar bisa dipakai return { state, next, prev, }; }, }; </script>

Untuk penjelasan dapat kalian lihat di komenan kodingan di atas ya. Perlu kalian ketahui, disini kita menggunakan fitur baru di Vue js versi 3, yaitu Composition API.

Dengan memanfaatkan Composition API ini dapat memudahkan untuk manajemen kode serta kode lebih mudah dibaca.

Jangan lupa untuk setting base url tadi di file .env. Kita buat dulu file .env di root. Kemudian isi seperti berikut.

.env

1	VUE_APP_API_URL = https://reqres.in/api

Jangan lupa untuk restart projek kalian setelah membuat env ini, agar bisa digunakan.

Langkah terakhir, pada file App.vue tambahkan component User yang sudah kita buat tadi. Kode lengkapnya seperti ini jadinya.

src/App.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<template> <div id="app"> <!-- Ini adalah component User --> <User /> </div> </template> <script> import User from "./components/User.vue"; export default { name: "App", components: { User, }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 60px; } </style>

Sekarang Jalankan kembali  npm run serve 

Jika berhasil maka hasilnya akan seperti ini

Oke, sekian dulu tutorial kali ini, terimakasih dan mohon maaf jika ada kesalahan dalam penjelasan. Terimakasih juga channel youtube Bitfumes atas tutorialnya tentang ini untuk kita jadikan referensi tutorial ini. Silahkan tanyakan di kolom komentar jika masih bingung. Sekian Wassalamualaikum wr. wb.