Menggunakan Axios untuk Mengkonsumsi API

Contoh Dasar

Seringkali ketika membangun aplikasi untuk web, Anda mungkin ingin menggunakan dan menampilkan data dari sebuah API. Ada beberapa cara untuk melakukannya, namun pendekatan yang sangat populer adalah dengan menggunakan axios, sebuah HTTP client berbasis promise.

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

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 kait siklus hidup mounted:

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:

See the Pen First Step Axios and Vue by Vue (@Vue) on CodePen.

Luar biasa! 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.

Contoh Dunia Nyata: Bekerja dengan Data

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 menampilkan sebagai berikut:

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

See the Pen Second Step Axios and Vue by Vue (@Vue) on CodePen.

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, dan kita akan membuat filter untuk memastikan bahwa nilai desimal juga tepat.

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

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

See the Pen Third Step Axios and Vue by Vue (@Vue) on CodePen.

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 mungkin ingin membuat loader untuk kasus ini, kemudian memberi tahu pengguna bahwa kita tidak dapat mendapatkan data sama sekali.

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"
      class="currency"
    >
      {{ currency.description }}:
      <span class="lighten">
        <span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
      </span>
    </div>

  </section>
</div>

Anda dapat menekan tombol re-run pada pen ini untuk melihat status memuat secara singkat sambil kita mengumpulkan data dari API.

See the Pen Fourth Step Axios and Vue by Vue (@Vue) on CodePen.

Ini bahkan dapat lebih ditingkatkan dengan penggunaan komponen untuk bagian-bagian yang berbeda dan pelaporan kesalahan/galat yang lebih jelas, tergantung pada API yang Anda gunakan dan kompleksitas aplikasi Anda.

Pola Alternatif

Fetch API

Fetch API adalah API native yang bagus untuk jenis permintaan ini. Anda mungkin pernah mendengar bahwa salah satu keuntungan dari Fetch API adalah tidak perlu memuat pustaka tambahan untuk menggunakannya, dan itu benar! Tetapi… Fetch API belum di dukung secara penuh, jadi Anda tetap akan perlu menggunakan polyfill. Ada beberapa penghambat/rintangan saat bekerja dengan API ini, itulah sebabnya banyak orang lebih suka menggunakan axios untuk saat ini. Namun hal ini sangat mungkin untuk berubah di masa depan.

Jika anda tertarik menggunakan Fetch API, ada beberapa artikel bagus yang menjelaskan cara menggunakannya.

Ringkasan

Ada banyak cara untuk bekerja dengan Vue dan axios selain mengkonsumsi dan menampilkan API. Anda juga dapat berkomunikasi dengan Serverless Functions, memposting/mengedit/menghapus dari API dimana Anda memiliki hak akses tulis, dan masih banyak lagi manfaatnya. Karena integrasi yang mudah dari kedua pustaka ini, menjadikannya pilihan yang sangat umum bagi pengembang yang memerlukan integrasi HTTP clients ke dalam alur kerja mereka.

Pertolongan

Alat

Pustaka Inti

Berita

Daftar Sumber Daya