Pertemuan kali ini kita akan mencoba GET dan POST data API Gorest.co.in
Untuk mendapatkan Access Token Gorest.co.in, silakan login menggunakan akun Google, Facebook atau Github.
Setelah login, pilih menu Access Token.
Kemudian kita buat file html
Tambahkan potongan kode berikut ini:
Last updated
Was this helpful?
Was this helpful?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Axios - Gorest.co.in</title>
<script src="lib/vue.js"></script>
<script src="lib/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>API Gorest.co.in</h1>
<input v-model="name" placeholder="name">
<input v-model="description" placeholder="description">
<button v-on:click="saveCategory">Simpan</button>
<hr>
<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="gorest in info">
{{ gorest.name }} <br>
{{ gorest.description }}
<hr>
</div>
</section>
</div>
....
</body>
</html><script>
let vm = new Vue({
el: '#app',
data: function () {
return {
info: null,
loading: true,
errored: false,
name: null,
description: null,
}
},
methods: {
saveCategory: function () {
let _data = {
'name': this.name,
'description': this.description,
'status': true
}
axios
.post('https://gorest.co.in/public-api/categories/', _data, {
headers: {"Content-type": "application/json; charset=UTF-8","Authorization": "Bearer AccessToken"}
})
.then(response => {
this.info = response
console.log(response)
this.getCategory()
})
.catch(error => {
console.log(error)
this.errored = true
})
},
getCategory: function () {
axios
.get('https://gorest.co.in/public-api/categories')
.then(response => {
this.info = response.data.data
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
},
mounted () {
// panggil method getCategory()
this.getCategory()
}
})
</script>