VueJs-#06 Mengakses REST API Menggunakan Vue.js dan Axios

Saat ini penggunakan REST API dalam membuat software berbasis web sudah sangat umum digunakan. Akhir-akhir ini penggunaan Axios sangat familiar di kalangan Developers khususnya para pengguna Javascript.

Axios dikenal dengan istilah Promise based HTTP client. Dimana axios lebih prioritas mengembalikan promise daripada memanggil callbacks. Hal yang paling umum yang dapat kita lakukan dengan Axios adalah HTTP request dari browser atau membuat HTTP request dengan Node.js.

Berikut kita akan menampilkan data dan menambahkan data menggunakan Vue.js dan Axios.

Installasi

Yang paling mudah menggunakan CDN, tambahkan script Axios pada script anda,

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

Persiapan API

Di latihan kali ini kita akan memanggil API dari dari CoinDesk API yang akan menampilkan harga bitcoin, yang datanya diupdate setiap menit, alamatnya yaitu https://api.coindesk.com/v1/bpi/currentprice.json.

{
   "time": {
      "updated": "Sep 15, 2019 15:47:00 UTC",
      "updatedISO": "2019-09-15T15:47:00+00:00",
      "updateduk": "Sep 15, 2019 at 16:47 BST"
   },
   "disclaimer": "This data was produced from the CoinDesk Bitcoin Price Index (USD). Non-USD currency data converted using hourly conversion rate from openexchangerates.org",
   "chartName": "Bitcoin",
   "bpi": {
      "USD": {
         "code": "USD",
         "symbol": "$",
         "rate": "10,310.8383",
         "description": "United States Dollar",
         "rate_float": 10310.838
      },
      "GBP": {
         "code": "GBP",
         "symbol": "£",
         "rate": "8,244.7010",
         "description": "British Pound Sterling",
         "rate_float": 8244.701
      },
      "EUR": {
         "code": "EUR",
         "symbol": "€",
         "rate": "9,242.0168",
         "description": "Euro",
         "rate_float": 9242.017
      }
   }
}

Penerapan

Buat file html sbb :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Vue Call API using Axios</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <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>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
    var 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)
        }
    });
    </script>
</html>

Hasilnya sbb:

CoinDesk API

Sumber:

  1. https://daengweb.id/vuejs-ajax-request-menggunakan-axios
  2. https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>