> For the complete documentation index, see [llms.txt](https://rachmat-nur.gitbook.io/pemrograman-web-i/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rachmat-nur.gitbook.io/pemrograman-web-i/vue.js/vue-axios-lanjutan.md).

# Vue Axios Lanjutan

Untuk mendapatkan Access Token Gorest.co.in, silakan login menggunakan akun Google, Facebook atau Github.

Setelah login, pilih menu Access Token.

![](/files/-MQzXtvHKHwe8-Ed1EXS)

Kemudian kita buat file html

```javascript
<!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:

```javascript
<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>
```
