Vue Axios

Menggunakan Axios untuk Mengkonsumsi API

Last updated 4 years ago

Was this helpful?

Vue Axios

Menggunakan Axios untuk Mengkonsumsi API

Pendahuluan

Axios merupakan sebuah HTTP client berbasis promise. Axios memberikan kemudahan dalam menghandle AJAX request.

Dalam latihan ini, kita akan menggunakan untuk menampilkan harga Bitcoin, yang diperbarui setiap menit. Pertama, kita akan pasang axios dengan npm/yarn atau melalui tautan CDN.

Tambahkan script di bawah ini ke dalam file html atau bisa didownload terlebih dahulu, lalu simpan ke dalam folder lib pada project sebelumnya.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Kita dapat melakukan permintaan informasi dari API dengan beberapa cara, namun sebaiknya kita pahami dulu format data nya, agar kita mengetahui apa yang akan ditampilkan. Untuk melakukan nya, kita akan melakukan panggilan ke API dan menampilkannya sehingga kita dapat melihatnya. Kita dapat melihat pada dokumentasi CoinDesk API, panggilan ini akan dilakukan ke https://api.coindesk.com/v1/bpi/currentprice.json.

Jadi, pertama, kita akan membuat sebuah properti data yang pada akhirnya akan menyimpan informasi kita, dan kita akan mengambil data dan menetapkannya menggunakan mounted:

let vm = new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => (this.info = response))
  }
})

<div id="app">
  {{ info }}
</div>

Dan kita mendapatkan seperti berikut:

Kita sudah mendapatkan beberapa data. Namun saat ini data tersebut terlihat berantakan, jadi mari kita tampilkan dengan benar dan kita tambahkan beberapa penanganan kesalahan/galat jika sesuatu tidak berjalan sesuai yang diharapkan atau memerlukan waktu lebih lama dari yang kita pikirkan untuk mendapatkan informasi tersebut.

Menampilkan Data dari API

Pada umumnya informasi yang kita perlukan berada dalam respon, dan kita harus menelusuri apa yang baru saja kita simpan untuk dapat mengaksesnya dengan benar. Dalam kasus kita, kita dapat melihat bahwa informasi harga yang kita perlukan ada di response.data.bpi.

Jika kita menggunakan ini, kita perlu mengubah bagian this.info = response menjadi this.info = response.dat.bpi

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))

Hasilnya sebagai berikut:

Ini jauh lebih mudah bagi kita untuk menampilkannya, jadi sekarang kita dapat melakukan pembaruan html kita agar hanya menampilkan informasi yang kita butuhkan dari data yang kita terima.

<div id="app">
    <h1>Bitcoin Price Index</h1>
    <div v-for="currency in info">
      {{ currency.description }}:
      <span>
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>
</div>

filters: {
  currencydecimal (value) {
    return value.toFixed(2)
  }
},

Hasilnya sebagai berikut:

Berikut kode selengkapnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Axios</title>
    <script src="lib/vue.js"></script>
    <script src="lib/axios.min.js"></script>

</head>
<body>
    <div id="app">
        <h1>Bitcoin Price Index</h1>
        <div v-for="currency in info">
          {{ currency.description }}:
          <span>
            <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
          </span>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data () {
                return {
                info: null
                }
            },
            mounted () {
                axios
                .get('https://api.coindesk.com/v1/bpi/currentprice.json')
                .then(response => (this.info = response.data.bpi))
            },
            filters: {
                currencydecimal (value) {
                    return value.toFixed(2)
                }
            },
        });
    </script>
</body>
</html>

Berurusan dengan Galat

Terkadang kita mungkin tidak mendapatkan data yang kita inginkan dari API. Ada beberapa alasan mengapa panggilan menggunakan axios gagal, termasuk namun tidak terbatas pada:

API tidak berfungsi.
Permintaan dibuat dengan tidak benar.
API tidak memberikan kita informasi dengan format yang kita antisipasi.

Ketika membuat permintaan, kita harus memeriksa kondisi seperti itu, dan memberi diri kita informasi pada setiap kasus sehingga kita tahu cara menangani masalah tersebut. Dalam panggilan axios, kita akan melakukannya dengan catch.

axios
  .get('https://api.coindesk.com/v1/bpi/currentprice.json')
  .then(response => (this.info = response.data.bpi))
  .catch(error => console.log(error))

Ini akan memberi tahu kita jika sesuatu gagal selama permintaan API, namun bagaimana jika datanya rusak atau API tidak berfungsi? Sekarang pengguna tidak akan melihat apa-apa. Kita dapat membuat loader untuk kasus ini, kemudian memberi tahu pengguna bahwa kita tidak dapat mendapatkan data sama sekali.

let vm = new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})

<div id="app">
  <h1>Bitcoin Price Index</h1>

  <section v-if="errored">
    <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
  </section>

  <section v-else>
    <div v-if="loading">Loading...</div>

    <div
      v-else
      v-for="currency in info">
      {{ currency.description }}:
      <span>
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

Berikut tampilan jika terjadi kesalahan pada API

Berikut tampilan jika akses ke API berhasil

Referensi

PreviousVue NextVue Axios Lanjutan

Last updated 4 years ago

Was this helpful?