Vue-Axios

今天來介紹的是，該如何去介接 API，也就是使用 AJAX 取得資料，以前官方推薦的是 Vue-resource，現在則是有 Axios 取代，這裡先附上文件，上面也都有教該如何安裝套件及使用，而這裡我就直接示範一下囉！

安裝套件

首先，我們要先安裝套件，可以用 yarn 或是 npm，這裡我是使用 npm。

$ npm install --save axios vue-axios

安裝好後再去我們的進入點啟用。

//src/main.js

import Vue from  'vue';
import axios from 'axios'; //載入 axios
import VueAxios from 'vue-axios'; //載入 vue-axios
 
Vue.use(VueAxios, axios) //啟用 vue-axios, axios

這樣就可以使用 Axios 了唷！
接下來，我來實際示範一次該怎麼使用。

//src/App.vue

<script>
export default {
  name: 'App',
  methods: {
    getCard() {
      this.$http.get('https://randomuser.me/api/').then((response) => {
        console.log(response)
      })
    },
  },
  created() {
    this.getCard();
  },
}
</script>

首先，先建立一個方法，內容就是利用 AJAX 取得資料，並且在 created 這個 hook 的時候觸發它，如果你忘記hook 是什麼的話，可以往前找到我介紹生命週期的文章，這裡就不再多解釋。

我所接的 API 是一個可以產生隨機用戶資料的網站，附上連結，上面的資料當然都是假的，所以可以安心用來練習。

用 AJAX 取得資料是不是相當簡單呢！

不過這上面的 get 只是其中一種方法而已，還有 put、post、delete 等，如果對 AJAX 還有興趣的話，可以自行 goole 一下，資料相當多唷！

那麼，明天再見囉！