Vue Axios Lanjutan
Pertemuan kali ini kita akan mencoba GET dan POST data API Gorest.co.in
Last updated
Was this helpful?
Pertemuan kali ini kita akan mencoba GET dan POST data API Gorest.co.in
Last updated
Was this helpful?
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
<!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>Tambahkan potongan kode berikut ini:
<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>